PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS Hover-Link ?


Milchbox
27.01.2005, 18:45
ich wollte fragen wie man einen bild hoverlink macht.
bitte von anfang an schreiben!
Tomarus
27.01.2005, 20:13
'einen bild hoverlink' verstehe ich jetzt einfach mal als 'ein script, dass dafür sorgt, dass beim überfahren eines bildes mit der maus stattdessen ein anderes bild angezeigt wird'. voilà.


<html>
<head>
<title>Anus</title>
<script type="text/javascript">
<!--
i01 = new Image();
i01.src = "gfx/news_off.gif"; // 1. normale Grafik
i02 = new Image();
i02.src = "gfx/news_on.gif"; // 1. Grafik bei Mausberührung

function change(ImageName, ImageObjektName)
{
document.images[ImageName].src = eval(ImageObjektName + ".src")
// ImageName - Name des auszutauschenden Bildes, z.B. News
// ImageObjektName - Name des Bildes mit dem ausgetauscht wird, z.B. i02
} -->
</script>
</head>
<body>
<img src="gfx/news_off.gif" name="news" onMouseOver="change('news', 'i02');" onMouseOut="change('news', 'i01');">
</body>
</html>


Bei mehreren Bildern musst du im Script die entsprechenden hinzufügen ... und zwar ginge es dann mit i03 und i04 weiter. Außerdem ist das name=""-Attribut im <img>-Tag wichtig.
Rolus
27.01.2005, 20:21
Hm, nun ja. Wie man an Tomarus' Skript sieht, macht man sowas mit JavaScript. Aber ich würde dir den normalen kürzeren Weg empfehlen:


<img src="bild1.png" name="mouseover" onmouseover="mouseover.src='bild2.png';"
onmouseout="mouseover.src='bild1.png';">

Viel zu sagen gibt's da nicht. Solange man mit der Maus über dem Bild ist, wird bild1.png durch bild2.png ersetzt.
edit: Es gibt viele Wege, wie man sieht. Ich (als Programmierer) würde den kürzesten nehmen.

freundliche Grüße, Rolus
wrtlprnft
27.01.2005, 20:23
Das ist aber kein css.

<html>
<head>
<title>blubb</title>
<style type="text/css">
<!--
#link div {
height:123px; /*Höhe des Bildes*/
width:123px; /*Breite*/
background:url(imagename);
}
#link:hover div {
background:url(hoverbild);
}
-->
</style>
</head>
<body>
<a id="link" href="blubb"><div>&nbsp;</div></a>
</body>
</html>geht auch mit mehreren Links, sie brauchen eben nur eigene IDs.