Hallo,
mein Problem ist folgendes und ich hab mir schon ne Woche nen Wolf gesucht:
Die navigation einer internetseite besteht aus vielen unterschiedlichen grafiken, welche, wenn man darüber hovert, eine gif animation zeigen sollen. es kommt hinzu, dass die bilder image-maps darstellen und die hot spots alle polygonförmig sind. also habe ich es mit hilfe von javascript geschafft, dass bei einem hover über einen hot spot das gif in einem sich über der grafik befindlichen div-container gezeigt wird. der hot spot an sich befindet sich auf einem transparenten platzhalter, der sich immer über der grafik und dem div-container befindet, da es sonst zu einem flackern käme.
das problem ist, dass nicht alle gifs in einer schleife ablaufen, sondern nur einmal und die animation schon abgelaufen ist, wenn man über das element hovert.
hier der code, den ich verwende, auf ein einfaches bild angewendet (der hotspot ist hier ein kreis):
meine frage ist: gibt es eine möglichkeit, dass das gif erst geladen wird, wenn man über den hotspot fährt, oder dass das gif dann erst abgespielt wird? (es soll natürlich bei jedem hovern aufs neue abgespielt werden.)
und es kommt noch eine zweite frage hinzu:
es sollen ja sehr viele verschiedene gifs angezeigt werden. wenn man nun über das jeweilige navigationselement hovert, kann ich, wenn ich die einzelnen gifs "hover_1.gif" , "hover_2.gif"... "hover_n.gif" benenne, das javascript nach der jeweiligen id nummer nach dem dazupassenden gif suchen lassen?
also dass die nummer den dateinamen komplettiert ..="<src=hover_[id_nummer].gif>" in dieser art?
ich hoffe, es ist verständlich ausgedrückt.
bitte versucht es einfach zu halten, mit javascript kenne ich mich noch nicht sehr gut aus
ich bedanke mich jetzt schon, denn die seite soll als kompetenzprojekt an meiner schule dienen, welche schwerwiegende noten bekommen soll. ihc stecke wirklich seit einem jahr mein herzblut in diese seite.
noch einmal danke, kelly
mein Problem ist folgendes und ich hab mir schon ne Woche nen Wolf gesucht:
Die navigation einer internetseite besteht aus vielen unterschiedlichen grafiken, welche, wenn man darüber hovert, eine gif animation zeigen sollen. es kommt hinzu, dass die bilder image-maps darstellen und die hot spots alle polygonförmig sind. also habe ich es mit hilfe von javascript geschafft, dass bei einem hover über einen hot spot das gif in einem sich über der grafik befindlichen div-container gezeigt wird. der hot spot an sich befindet sich auf einem transparenten platzhalter, der sich immer über der grafik und dem div-container befindet, da es sonst zu einem flackern käme.
das problem ist, dass nicht alle gifs in einer schleife ablaufen, sondern nur einmal und die animation schon abgelaufen ist, wenn man über das element hovert.
hier der code, den ich verwende, auf ein einfaches bild angewendet (der hotspot ist hier ein kreis):
Code:
<head>
<script type="text/javascript">
<!--
function sichtbar() {
document.getElementById("p1").style.background="url(hover.gif)";
document.getElementById("p1").style.display="block";
}
function unsichtbar()
{
document.getElementById("p1").style.display="none";
}
//-->
</script>
<style type="text/css">
.platzhalter{
position:absolute;
top:0;
left:0;
z-index:3;
}
.grund, .rahmen{
position:absolute;
top:0;
left:0;
}
.rahmen{
height:377px;
width:264px;
z-index:2;
display:none;
background-image:url(platzhalter.png);
overflow:visible;
}
</style>
</head>
<body>
<div class="rahmen" id="p1">
<img src="hover.gif" width="264" height="377" />
</div>
<img class="grund" src="navigationselment.png" width="264" height="377" />
<img src="platzhalter.png" width="264" height="377" border="0" usemap="#lampe" class="platzhalter" />
<map name="lampe" id="lampe">
<area shape="circle" coords="108,102,47" href="#" onmouseover="sichtbar()" onmouseout="unsichtbar()" />
</map>
</body>
</html>meine frage ist: gibt es eine möglichkeit, dass das gif erst geladen wird, wenn man über den hotspot fährt, oder dass das gif dann erst abgespielt wird? (es soll natürlich bei jedem hovern aufs neue abgespielt werden.)
und es kommt noch eine zweite frage hinzu:
es sollen ja sehr viele verschiedene gifs angezeigt werden. wenn man nun über das jeweilige navigationselement hovert, kann ich, wenn ich die einzelnen gifs "hover_1.gif" , "hover_2.gif"... "hover_n.gif" benenne, das javascript nach der jeweiligen id nummer nach dem dazupassenden gif suchen lassen?
also dass die nummer den dateinamen komplettiert ..="<src=hover_[id_nummer].gif>" in dieser art?
ich hoffe, es ist verständlich ausgedrückt.
bitte versucht es einfach zu halten, mit javascript kenne ich mich noch nicht sehr gut aus
ich bedanke mich jetzt schon, denn die seite soll als kompetenzprojekt an meiner schule dienen, welche schwerwiegende noten bekommen soll. ihc stecke wirklich seit einem jahr mein herzblut in diese seite.
noch einmal danke, kelly
