Hi,
http://92.228.195.49/coding/DeMi/er…cs/inserat.html
Es geht um die Tuse da auf weißem Hintergrund, wie der Effekt gewünscht ist, ist glaub ich klar, oder?
Der Effekt funktioniert soweit ganz gut, solange man mit der Maus nicht über den Textbereich auf der Grafik kommt.
Jemand ne Ahnung woran das ligen könnte?
HTML
<a class="inserat" href="#" onmouseover="inserateMouseOver('1');" onmouseout="inserateMouseOut('1');">
<div id="thumb1">
<img src="img/inserate/100/inserat_thumb_100_1.jpg" alt="Inserat 1">
<div> Tina</div>
</div>
<img id="shade1" class="shade" src="img/inserate/100/inserat_thumb_shade_100_1.jpg" alt="Inserat 1" />
</a>Code
/* < INSERAT */
.inserat {
width: 138px;
display: block;
text-decoration: none;
float: left;
margin: 5px;
}
.inserat div div {
color: #FFFFFF;
width: 138px;
height: 20px;
background: url(../img/inserate/thumb.text.bg.png);
font-size: 10px;
line-height: 20px;
z-index: 100;
position: relative;
top: -20px;
float: left;
}
.inserat .shade {
position: relative;
top: -19px;
}
/* INSERAT > */PHP
function inserateMouseOver(id) {
new Effect.Move('thumb'+id,{x : 0,y : -3 , duration:0.2});
new Effect.Move('shade'+id,{x : 0,y : 3 , duration:0.2});
}
function inserateMouseOut(id) {
new Effect.Move('thumb'+id,{x : 0,y : 3 , duration:0.2});
new Effect.Move('shade'+id,{x : 0,y : -3 , duration:0.2});
}
<div> ist eigentlich kein inline element soweit ich das verstanden hab - deshalb bugts auch beim rollover *vermut* - komplizierter Lösungsvorschlag: Wasserzeichen mit PHP.