Hallo,
Welches ist das beste System, einzelne Teile eines Schwarz/Weis Bildes bei Mouseover farblich hervorzuheben?
Infrage kommt ja theoretisch,
css,
java,
flash
wobei mir flash nicht wirklich gefällt.
Druckbare Version
Hallo,
Welches ist das beste System, einzelne Teile eines Schwarz/Weis Bildes bei Mouseover farblich hervorzuheben?
Infrage kommt ja theoretisch,
css,
java,
flash
wobei mir flash nicht wirklich gefällt.
Hi,
da gibt es irgendwo im Netz ein geniales Beispiel wie man es mit CSS machen kann. Ich war gerade bestimmt eine halbe Stunde unterwegs, habe es aber leider nicht mehr gefunden.
Prinzipiell ist es aber so, dass eine Linkliste innerhalb einer Box (z.B. div's) erstellt wird. Der Box und den Links wird jeweils ein Bild zu gewissen, wobei die Box z.B. das farbige Bild ist und die Links zusammengesetzt das Bild in s/w sind, überlagert. Wenn man jetzt über einen der Links geht, wird das jeweilige Bild auf durchsichtig gesetzt.
Nur mal so als Tip.
Pingu
CSS ist sicher die beste weil allgemeinste Lösung, wenn dus hinkriegst. Nicht jeder hat Java und bei vielen hat es recht lang zum starten.
Deshalb mag ich Seiten nicht, bei denen das Applet nur so n bisschen Layout oder so ist. Ein Applet sollte für mich der Grund sein, wieso ich eine Seite besuche - nicht einfach Darstellungshilfe.
MfG Peschmä
Willst du die Farbe in einem Bild ändern oder das Bild austauschen?
Für eine Mouseover-Effekt ist Flash sicherlich überdimensioniert. Willst du aber interaktive Effekte ins Bild packen (z.B. kann Teile vom Bild verschieben) ist dies sehr einfach mit Flash realisierbar. Du kannst dann immer noch abfragen ob Flash vorhanden ist und alternativ CSS verwenden.
Für einen Mouseover-Effekt ist auch noch Javascript denkbar.
Offe
Möglichkeit 1:
Die Links (Betonsockel,Gitterzaum) plazierst du über deinem Bild.
setmarkerto(75,130,270,175) mußt du auf die Stelle setzen, die aufleuchten soll.
Code:<HTML><HEAD><TITLE>Hervorhebung</TITLE>
<LINK href="style.css" type=text/css rel=STYLESHEET>
</HEAD>
<BODY onload=initiate()>
<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -
var imgurl="../pics/zaun0.jpg"
// horizontal position of the image (distance to the left margin of the window, pixels)
var x_imgposition=270
// vertical position of the image (distance to the top margin of the window, pixels)
var y_imgposition=150
// maximum width of the animated border
var maxborderwidth=4
// color of the animated border
var border_color="#DD7427"
// speed of the marker-animation. A higher value will slow down the animation
var speed=100
// do not edit the variables below
var preloadimgurl=new Image()
preloadimgurl.src=imgurl
var clipleft,clipright,cliptop,clipbottom,x_marker,y_marker,tableheight,tablewidth,timer,contentmarker
var borderwidth=0
var step=1
var marker_is_on=false
var isloaded=false
function initiate() {
if(document.all) {
yourimage.innerHTML="<img src="+imgurl+">"
document.all.yourimage.style.posLeft=x_imgposition
document.all.yourimage.style.posTop=y_imgposition
isloaded=true
}
if(document.layers) {
document.yourimage.document.write("<img src="+imgurl+">")
document.yourimage.document.close()
document.yourimage.left=x_imgposition
document.yourimage.top=y_imgposition
isloaded=true
}
}
function setmarkerto(clpleft,clptop,clpright,clpbottom) {
marker_is_on=true
clipleft=eval(clpleft)
clipright=eval(clpright)
cliptop=eval(clptop)
clipbottom=eval(clpbottom)
tablewidth=clipright-clipleft
tableheight=clipbottom-cliptop
x_marker=eval(x_imgposition)+eval(clipleft)
y_marker=eval(y_imgposition)+eval(cliptop)
if(document.all && isloaded) {
document.all.marker.style.posLeft=x_marker
document.all.marker.style.posTop=y_marker
animatemarker()
}
if(document.layers && isloaded) {
document.marker.left=x_marker
document.marker.top=y_marker
animatemarker()
}
}
function animatemarker() {
if (marker_is_on) {
getcontentmarker()
borderwidth+=step
if (borderwidth>maxborderwidth) {step=step*(-1)}
else if (borderwidth<0) {borderwidth=step=step*(-1)}
if(document.all) {
marker.innerHTML=contentmarker
document.all.marker.style.visibility="visible"
timer=setTimeout("animatemarker()",speed)
}
if(document.layers) {
document.marker.document.write(contentmarker)
document.marker.document.close()
document.marker.visibility="visible"
timer=setTimeout("animatemarker()",speed)
}
}
else {
clearTimeout(timer)
}
}
function hidemarker() {
marker_is_on=false
if (document.all) {
document.all.marker.style.visibility="hidden"
}
if (document.layers) {
document.marker.visibility="hidden"
}
}
function getcontentmarker() {
contentmarker="<table cellpadding=0 cellspacing=0 width="+tablewidth+" height="+tableheight+" border="+borderwidth+" bordercolor="+border_color+"><tr><td> </td></tr></table>"
}
// - End of JavaScript - -->
</SCRIPT>
<DIV id=yourimage style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
<DIV id=marker style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
<A onmouseover=setmarkerto(75,130,270,175) onmouseout=hidemarker() href="#">Betonsockel</A>
<A onmouseover=setmarkerto(120,58,270,153) onmouseout=hidemarker() href="#">Gitterzäune</A>
<A onmouseover=setmarkerto(0,48,130,150) onmouseout=hidemarker() href="#">Zäune</A>
</BODY>
</HTML>
Möglichkeit 2:
Wenn man Lust hat kann man die Links und die Boxen mit einer Datenbank erzeugen.
http://lkrtest.bndlg.de/landkreis/la...nen/index.php/
http://www.cross-browser.com
Den ersten Link kann man transparent machen.
PHP-Code:<HTML><HEAD><TITLE>Link</TITLE>
<script type='text/javascript' src='cbe/cbe_core.js'></script>
<script type='text/javascript' src='cbe/cbe_slide.js'></script>
<script type='text/javascript' src='cbe/cbe_slide2.js'></script>
<script type='text/javascript' src='cbe/cbe_event.js'></script>
<style>
.content {
position: absolute; visibility:hidden;
left:100px; top:120px;
width: 20px; height: 20;
background:red; layer-background-color:red;
}
.Links {
position: absolute;visibility:hidden;
left:200px; top:220px;
width: 20px; height: 20;
background:green; layer-background-color:green;
}
</style>
<script type='text/javascript'>
<!--
var content,Links;
function windowOnload() {init()};
function init(){
with (content = cbeGetElementById('content').cbe) {
resizeTo(20,20);
moveTo(100,120);
show();
}
with (Links = cbeGetElementById('Links').cbe) {
zIndex(200);
resizeTo(20,20);
moveTo(200,220);
hide();
}
}
function zeig(cbe) {
document.getElementById(cbe).cbe.show();
}
function versteck(cbe) {
document.getElementById(cbe).cbe.hide();
}
</script>
</head>
<body>
<IMG SRC = "umrisskarte.gif" WIDTH = "500" HEIGHT ="412" BORDER="0">
<div id="content" class="content">
<a href="mylink" target='top' onMouseOver="javascript:zeig('Links')";
onMouseOut="javascript:versteck('Links')"; >
<IMG SRC = "red.gif" width = "20" height ="20" border="0"></a>
</div>
<div id="Links" class="Links">
<IMG SRC = "green.gif" width = "20" height ="20" border="0">
</div>
</BODY>
</HTML>
Möglichkeit 3:
Code:<HTML><HEAD><TITLE>Link</TITLE>
<script type='text/javascript' src='cbe/cbe_core.js'></script>
<script type='text/javascript' src='cbe/cbe_slide.js'></script>
<script type='text/javascript' src='cbe/cbe_slide2.js'></script>
<script type='text/javascript' src='cbe/cbe_event.js'></script>
<style>
.Links {
position: absolute;visibility:hidden;
left:200px; top:220px;
width: 20px; height: 20;
background:green; layer-background-color:green;
}
</style>
<script type='text/javascript'>
<!--
var Links;
function windowOnload() {init()};
function init(){
with (Links = cbeGetElementById('Links').cbe) {
zIndex(200);
resizeTo(20,20);
moveTo(200,220);
hide();
}
}
function zeig(cbe) {
document.getElementById(cbe).cbe.show();
}
function versteck(cbe) {
document.getElementById(cbe).cbe.hide();
}
</script>
</head>
<body>
<IMG SRC = "umrisskarte.gif" WIDTH = "500" HEIGHT ="412" BORDER="0" USEMAP="#map">
<MAP NAME ="map">
<AREA SHAPE="RECT" COORDS="4,106,92,133" HREF="Zöschingen"
onMouseOver="javascript:zeig('Links')";
onMouseOut="javascript:versteck('Links')"; >
</map>
<div id="Links" class="Links">
<IMG SRC = "green.gif" width = "20" height ="20" border="0">
</div>
</BODY>
</HTML>
ohne Javascript mit CSS:
Buttons mit Bildern
interessant aber nur für IE:
filter:Gray()
Offe
@ Offe,
es geht ja darum das es ein Komplexes Bild ist. Also ein Gruppen Bild mit 30 Leuten. Dementsprechend ein Riesenaufwand und ich weis nicht ob das mit dem css so funktioniert.
Es funktioniert mit CSS in den neuen Browsern ganz gut.
NS4 steigt dagegen aus.
Aber für diesen Effekt gibt es noch ein paar Möglichkeiten der Realisierung.
bei css ist halt das problem, dass es nicht jeder browser kann bzw nicht richtig kann! allerdings denke ich, dass es auch mit hotspots gehen müsste, also dass man bestimmte bereiche eines bildes mit kreisen, rechtecken und so beschreibt und dann ein kleines rolloverscript schreibt!! das dürfte eigentlich kein problem sein, jedoch würde ich dafür ein programm wie golive benutzen, da man die koordinaten bestimmen muss, was mit dem editor nicht so leicht ist/wäre!!
johnpatcher