Log In
Home
October 14, 2004
Offline
Jag skulle behöva hjälp med detta mouse over-script.
Det är så att jag skulle vilja kunna göra så att när man för musen över en bild, så ändras bilden och samtidigt dyker det upp en slags beskrivning eller vad man nu ska säga under bilden. Jag har bara hittat script där man kan använda text och inte bilder till sånt här, så nu skulle jag behöva ett script där man kan använda bilder för att få en sådan mouse over-effekt.
December 26, 2003
Offline
Det går att göra med CSS. 🙂
Fast IE's stöd för CSS suger, så vi får komplettera med lite JavaScript för att gynna alla IE-användare.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="sv">
<head>
<title>Test</title>
<style type="text/css">
#foo { float: left; }
#foo img { display: block; }
#foo span { display: none; }
#foo:hover .bar, #foo.hover .bar { display: none; }
#foo:hover span, #foo.hover span { display: block; }
</style>
<!--[if IE]>
<script type="text/javascript">
window.onload = function(){
var foo = document.getElementById("foo");
foo.onmouseover = function(){
this.className = "hover";
}
foo.onmouseout = function(){
this.className = "";
}
}
</script>
<![endif]-->
</head>
<body>
<p id="foo">
[Image Can Not Be Found] <span>
[Image Can Not Be Found] Beskrivning
</span>
</p>
</body>
</html>
En nackdel är att tangentbordsanvändare inte får tillgång till den andra bilden eller beskrivningen... Men det kanske du kan lösa på nåt vis. 😉 (Tex genom att ge en länk till en version som inte använder denna hover-effekt. Därmed kan även de IE-användare som har JavaScript inaktiverat ta del av informationen.)
1 Guest(s)
