chriskoller
Mitglied
Hallo habe eine Diashow erstellt bei der ein "Info" Button neben den "weiter" und "zurück" Button gesetzt werden soll. Hätte gerne das beim überfahren des Info Buttons mit dem Mauszeiger ein Infotext rechts neben dem Bild angezeigt wird. Habe allerdings keine Ahnung wie das funktioniert. Bitte um Vorschläge.
Hier unten der Code und im Anhang die Bilder:
Hier unten der Code und im Anhang die Bilder:
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-size: 100, 01%;
font-family: verdana, sans-serif;
background-color: #bdbec6;
}
#bild1 {
position: absolute;
left: 10px;
top: 10px;
z-index: 4;
visibility: visible;
}
#bild2 {
position: absolute;
left: 10px;
top: 10px;
z-index: 3;
visibility: hidden;
}
#bild3 {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
visibility: hidden;
}
#bild4 {
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
visibility: hidden;
}
</style>
<script language="javascript" type="text/javascript">
<!--
function ebenen_wechsel(neu, vorher){
document.getElementById(neu).style.visibility = "visible";
document.getElementById(vorher).style.visibility = "hidden";
}
//-->
</script>
</head>
<body>
<div id="bild1">
<img src="gipfel.jpg" width="400px" alt="" />
<p>
<a href="#" onclick="ebenen_wechsel('bild2','bild1');">Weiter</a>
</p>
</div>
<div id="bild2">
<img src="schichtung.jpg" width="400px" alt="" />
<p>
<a href="#" onclick="ebenen_wechsel('bild1','bild2');">Zurück</a> <a href="#" onclick="ebenen_wechsel('bild3','bild2');">Weiter</a>
</p>
</div>
<div id="bild3">
<img src="meer.jpg" width="400px" alt="" />
<p>
<a href="#" onclick="ebenen_wechsel('bild2','bild3');">Zurück</a> <a href="#" onclick="ebenen_wechsel('bild4','bild3');">Weiter</a>
</p>
</div>
<div id="bild4">
<img src="natur.jpg" width="400px" alt="" />
<p>
<a href="#" onclick="ebenen_wechsel('bild3','bild4');">Zurück</a>
</p>
</div>
</body>
</html>
