tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
1283
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 19.02.10 17:11 #1
    kellykatz kellykatz ist offline Mitglied
    Registriert seit
    Jul 2008
    Beiträge
    19
    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):

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

     
<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
     
    Zitieren Zitieren
  2. 19.02.10 18:30 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    das erste Problem kannst du lösen, indem du dem Dateiname einen Zeitstempel anfügst.
    Code :
    1

    document.getElementById("p1").style.background="url(hover.gif?"+new Date().getTime()+")";

    Zu deiner zweiten Frage - falls die Ziffer bei ID und Dateiname gleich sind, könntest du diese der Funktion als Argument übergeben. Innerhalb der Routine werden die benötigten Zeichenketten zusammengefügt.
    Code :
    1
2
3
4
5
6
7
8

    function sichtbar(intIndex) {
  document.getElementById("p"+intIndex).style.background="url(hover_"+intIndex+".gif"+new Date().getTime()+")";
  document.getElementById("p"+intIndex).style.display="block";
}
 
function unsichtbar(intIndex){
  document.getElementById("p"+intIndex).style.display="none";
}

    Die benötigte Ziffer wird im Funktionsaufruf übergeben:
    Code :
    1

    <area shape="circle" coords="108,102,47" href="#" onmouseover="sichtbar(1)" onmouseout="unsichtbar(1)" />

    Zuletzt möchte ich dich bitten, die Gross- und Kleinschreibung wie in der Netiquette unter Punkt 15 zugestimmt einzuhalten. Besten Dank im voraus.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 21.02.10 14:43 #3
    kellykatz kellykatz ist offline Mitglied
    Registriert seit
    Jul 2008
    Beiträge
    19
    Danke!

    Das erste Problem hat sich mittlerweile schon erledigt. mein Fehler war ganz einfach, dass ich im HTML-Text im div-Kontainer schon das Bild, das eigentlich erst beim Hovern gezeigt werden sollte, definiert hatte, also es schon von vornherein da war. Ich musste nur diese Zeile löschen und nun funktioniert es einwandfrei.
    Aber trotzdessen danke für diese Lösung.

    Für die zweite Lösung will ich mich herzlich bedanken. Es wird mir eine menge Arbeit ersparen.

    vielen Dank

    kelly
     
    Zitieren Zitieren
« Onclick wieder aktivieren | onsubmit chk »

Ähnliche Themen

  1. Wie Image aus dem Web laden ?
    Von Stumppi im Forum Java
    Antworten: 2
    Letzter Beitrag: 28.04.05, 20:56
  2. onMouseOver Image einfügen
    Von CrushLog im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 06.02.05, 15:42
  3. Image Map: onMouseOver hervorheben?
    Von CrushLog im Forum HTML & XHTML
    Antworten: 8
    Letzter Beitrag: 15.10.04, 19:50
  4. Image laden
    Von thomson im Forum Visual Basic 6.0
    Antworten: 0
    Letzter Beitrag: 08.07.04, 16:00
  5. onMouseOver ändert Teil von Image Map
    Von pirate man im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 27.06.02, 09:56

Stichworte