ich wollte fragen wie man einen bild hoverlink macht.
bitte von anfang an schreiben!
Druckbare Version
ich wollte fragen wie man einen bild hoverlink macht.
bitte von anfang an schreiben!
'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à.
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.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>
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:
Viel zu sagen gibt's da nicht. Solange man mit der Maus über dem Bild ist, wird bild1.png durch bild2.png ersetzt.HTML-Code:<img src="bild1.png" name="mouseover" onmouseover="mouseover.src='bild2.png';"
onmouseout="mouseover.src='bild1.png';">
edit: Es gibt viele Wege, wie man sieht. Ich (als Programmierer) würde den kürzesten nehmen.
freundliche Grüße, Rolus
Das ist aber kein css.
geht auch mit mehreren Links, sie brauchen eben nur eigene IDs.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> </div></a>
</body>
</html>