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-Code:

<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:

HTML-Code:

<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.

PHP-Code:


<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.

Thema: CSS Hover-Link ?

Themen-Optionen

Anzeige

CSS Hover-Link ?

Berechtigungen