• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mehrere Bilder anzeigen bei Mouseover

K

Krapfen

Neues Mitglied
Hallo leute,
ich habe folgendes Problem.
Ich möchte eine Seite erstellen bei dem folgendes Hintergrundbild (Hintergrund.jpg) vorliegt:


Bei dem Hintergrundbild sind viele Sechseckige kleine Bilder vorhanden bei denen manche das selbe Thema haben.
Diese habe Ich hier mit 1,2 und 3 markiert.

Wenn ich nun mit der Maus über eines dieser Bilder fahre sollen auch alle anderen Bilder mit dem selben Thema aufleuchten, indem ein weiteres Bild (Sechseck.png) um sie herum auftaucht:


Jedes der Sechsecke soll einen Link bekommen wobei Bilder mit dem selben Thema den gleichen Link bekommen.

Wenn möglich sollte das alles nur in Html und Css geschrieben sein.

Ich weiß einfach nicht wie ich das machen soll hab da schon einige Stunden dran rumprobiert.

Hoffe Ihr könnt mir Helfen :)
MfG Lukas
 
Bei einer Image Map weiß ich nicht wo ich die Class angeben soll damit er ein Mouseover erkennt.

<map name="Hintergrund.jpg class="Thema1">
<area shape="polygon" coords="....." href="Thema1.html">
<area shape="polygon" coords="....." href="Thema1.html">
</map>

<ul>
<li class="Bildserie1">
<ul>
<li class="Bild1"><img src="Sechseck.png"></li>
<li class="Bild2"><img src="Sechseck.png"></li>
</ul>
</li>
</ul>

CSS:
.Bild1{top:...; left:...;}
.Bild2{top:...; left:...;}
.Bildserie1 {visibility:hidden; position:absolute;}
.Thema1:hover .Bildserie1 {visibility:visible;}

Das funktioniert nicht Ich weiß nich obs da noch iwelche Tricks gibt bin auf dem Gebiet noch ziemlich neu.
 
Hast Du dir die Beschreibung bei SelfHTML durchgelesen? Du brauchst ein Image-Tag und eine Map:
Code: 
<div id="Outer" style="position: relative">
<img src="Hintergrund.jpg" usemap="#Waben">
<map name="Waben">
<area shape="polygon" coords="....." href="Thema1.html">
<area shape="polygon" coords="....." href="Thema1.html">
</map>
<img id="Bild1" class="Gruppe1" src="Sechseck.png">
<img id="Bild2" class="Gruppe2" src="Sechseck.png">
</div>
Damit die Sechseck-Bilder über dem Hintergrund-Bild liegen, musst du sie absolut positionieren.
Code: 
#Bild1{top:...; left:...; position: absolute; display: none}
 
Hab das jetzt so gemacht wie du aber Ich weiß nicht wie ich beim Mouseover das "display:none" zu "display:inline-block" bekommen soll.

#Bild1{
top:50px; left:50px;
width:70px; height:65px;
position: absolute;
display:none; /*Wenn ich an dieser stelle none zu inline-block ändere zeigt es das Sechseck an*/
}

Die unten aufgeführten möglichkeiten zeigen nichts an.

.gruppe1:hover{
display:inline-block;
}

#Bild1:hover #Bild1{
top:50px; left:50px;
width:70px; height:65px;
position: absolute;
display:inline-block;
}

#Bild1:hover{
top:50px; left:50px;
width:70px; height:65px;
position: absolute;
display:inline-block;
}

img.gruppe1:hover{
top:50px; left:50px;
width:70px; height:65px;
position: absolute;
display:inline-block;
}
 
Soweit ich weiß, funktioniert das CSS-hover nur, wenn das zu ändernde Element ein Kind des Elementes ist, auf dem das Hover erfolgt. Aber bei CSS bin ich nicht so der Experte.
Mit jQuery könnte man es so machen:
Code: 
$("area").mouseover(function () {
cl = $(this).attr("data-group");
$(cl).css("diplay", "block");
});
und HTML:
Code: 
<area shape="polygon" coords="....." href="Thema1.html" data-group="Gruppe1">
Konnte es leider nicht testen. Wenn möglich, lade mal deine Seite hoch und poste die URL.
 
Wieso eigentlich Image Map? Entweder nehme ich hier ein einzelnes source image und generiere die HTML-Elemente mittels einer Schleife, oder erstelle das Polygon als Canvas. Der Rest ist dann JavaScript.
 
ein einzelnes source image und generiere die HTML-Elemente mittels einer Schleife
Zum Vergrößern anklicken....
Daran habe ich auch schon gedacht. Aber dann kann man den sensitiven Bereich nicht als Sechseck anlegen.
 
Habs jetz so gemacht

Code: 
<div id="Outer" style="position: relative">
<img src="Hintergrund.jpg" usemap="#Waben">
<map name="Waben">
<area shape="polygon" coords="....." href="Thema1.html" data-group="Gruppe1">
<area shape="polygon" coords="....." href="Thema1.html" data-group="Gruppe1">
</map>
<img id="Bild1" class="Gruppe1" src="Sechseck.png">
<img id="Bild2" class="Gruppe2" src="Sechseck.png">
</div>
<script>
$("area").mouseover(function () {
cl = $(this).attr("data-group");
$(cl).css("diplay", "block");
});
</script>

Dann in Css:
Code: 
#Bild1.Gruppe1{
top:50px; left:50px;
width:70px; height:65px;
position: absolute;
display:none;
}

Beim Mouseover wird aber immernoch nichts angezeigt
 
Ohne Koordinaten kann natürlich eine Image-Map nicht funktionieren. Außerdem hatte ich nicht daran gedacht, dass man each() verwenden muss, um alle Mitglieder einer Gruppe anzusprechen.
Ich habe mal eine Testseite gemacht, um den ersten Schritt zum Laufen zu bringen:
http://ulrichbangert.de/div/webdesign/javascript/waben.php
Aktiv ist die Wabe 1 in der zweiten Reihe.
Das sechseck.png musst Du wahrscheinlich noch transparent machen.
 
Das würde funktionieren allerdings habe ich jetzt das Problem das die Grafik den Hyperlink überdeckt.
Gibts dafür auch ne Lösung?
 
Die einfachste Lösung ist wahrscheinlich, ein onclick-Event auf die Grafik zu legen:
Code: 
        <script type="text/javascript">
            $("area").mouseover(function () {
                var cl = "." + $(this).attr("data-group");
                var dest = $(this).attr("href");
                $(cl).each(function () {
                    $(this).css("display", "block")
                    $(this).click(function () { window.location.href = dest; });
                });
            });
        </script>
Zusätzlich könnte man noch den Mauszeiger ändern, so dass er die Form wie bei einem Link hat.
 
Zuletzt bearbeitet von einem Moderator:
Also ich habs jetz folgendermaßen gelößt:
Code: 
            <script>
            function Mausover1(){
            var Grp1 = document.getElementsByClassName('Gruppe1');
            for(var i = 0; i < Grp1.length; i++) {
            Grp1[i].style.visibility = "visible";}}
           
            function Mausout1(){
            var Grp1 = document.getElementsByClassName('Gruppe1');
            for(var i = 0; i < Grp1.length; i++) {
            Grp1[i].style.visibility = "hidden";}}
            </script>

Ich habe dabei dein script in Javascript umgeändert, denn damit komme ich besser zurecht.

Code: 
            <div id="Outer" style="position: relative">
            <img src="league.jpg" usemap="#Waben">
            <map name="Waben">
            <area shape="circle" coords="50,50,25" href="#" onMouseOver="Mausover1()">
            </map>
Benutze jetzt circle damit Ich mir Arbeit spare, weil der link verdeckt wird.

Code: 
            <img id="Bild1" class="Gruppe1" src="Sechseck.png" onMouseOut="Mausout1()">
            <img id="Bild2" class="Gruppe1" src="Sechseck.png" onMouseOut="Mausout1()">
Diesen Teil habe ich ersetzt damit der Link im Bild ist.
Code: 
            <a id="Bild1" class="Gruppe1" href="Thema1.html"><img src="Sechseck.png" onMouseOut="Mausout1()" alt="Gruppe1" /></a>
            <a id="Bild2" class="Gruppe1" href="Thema1.html"><img src="Sechseck.png" onMouseOut="Mausout1()" alt="Gruppe1" /></a>
            </div>

CSS:
Code: 
.Gruppe1{
visibility:hidden;
}

#Bild1{
top:50px; left:50px;
width:70px; height:65px;
position: absolute;
}

#Bild2{
top:50px; left:100px;
width:70px; height:65px;
position: absolute;
}

Danke dir Sempervivum für deine Hilfe :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben