✔ Styleumwandlung nach Linkklick

DonMarkeZ

DonMarkeZ

Mitglied
Hallihallo !
Ich habe leider ein Problem. Das besteht darin, dass ich eine Internetseite habe, bei der die Links Bilder sind. Diese Bilder (Links) sind 6 Stück an der Zahl und befinden sich in 2 Reihen untereinander. Die einzelnen Links sollen zusammen 1 Bild ergeben, welches aber aus mehreren Teilen besteht.
Was ich versuche ist, dass wenn ich auf ein Bild (Link) klicke, dass sich alle anderen Bilder (Links) auch verändern, sodass sich wieder ein neues Bild aus den 6 Bildern (Links) ergibt.

Als Beispiel habe ich mal etwas geuppt !
Die dargestellten Bilder sind gleichzeitig die Links und nachdem ich auf ein Bild geklickt habe, verändern sich die Bilder zum 2. Beispiel. Wobei man sagen muss, dass bei jedem Link ein anderes "großes" Bild erscheint.
Ich hoffe das war verständlich genug :suspekt: hab mir zumindest Mühe gegeben:rolleyes:
Gruss

bsp1.gif

bsp2.gif
 
Na, das is ja kein Problem ^^

versuch mal folgendes:
HTML: 
<head>
    <script language="javascript">
        function changePics(nr)
        {
            if(typeof(nr) == "undefined")
                nr = 1;
                        
            for (var i = 0; i < 6; i++)
            {
                picHolder = document.getElementById("Img" + i);
                picHolder.setAttribute("onclick","changePics(2)");
                picHolder.setAttribute("src","bsp" + nr + "_" + i + ".gif");
            }
        }        
    </script>
</head>
<body onload="changePics();">

<img id="Img0" />
<img id="Img1" />
<img id="Img2" /><br />
<img id="Img3" />
<img id="Img4" />
<img id="Img5" />

</body>

Dieses Beispiel ersetzt nur das 1. mit dem 2. Bild, du könntest das dann durch einen Zufallswert, einen mitlaufenden Wert oder was auch immer ersetzen ;)

Die Bilder müssen, diesem Beispiel zufolge, als
bsp1_0.gif - bsp1_5.gif und
bsp2_0.gif - bsp2_5.gif
abgespeichert sein, wobei 0 das Bild links oben in der Ecke ist, und 5 das Bild rechts unten.

lg Masda
 
Dankeschön :)
Ich hoffe ich habe das jetz richtig verstanden mit den bildern und werde das gleich mal ausprobieren ;-]
Wenn es nicht klappt melde ich mich nochmal :p

Aso eine Frage hätte ich da noch ! So wie ich das jetzt verstanden habe, ist das Script nur für 2 "große" Bilder gedacht. Wie muss ich das ändern damit ich das für insgesamt 6 "große" Bilder nutzen kann ? ^^
 
Zuletzt bearbeitet:
Naja, hatte eigentlich gedacht, dass das selber probieren wirst, aber da du so lieb fragst :D

änders mal so ab :)

HTML: 
<head>
    <script language="javascript">
        function changePics(nr)
        {
            if (typeof(nr) == "undefined" || nr == 7)
                nr = 1;
                        
            for (var i = 0; i < 6; i++)
            {
                picHolder = document.getElementById("Img" + i);
                picHolder.setAttribute("onclick","changePics(" + (nr + 1) + ")");
                picHolder.setAttribute("src","bsp" + nr + "_" + i + ".gif");
            }
        }        
    </script>
</head>
<body onload="changePics();">

<img id="Img0" />
<img id="Img1" />
<img id="Img2" /><br />
<img id="Img3" />
<img id="Img4" />
<img id="Img5" />

</body>


jetzt ists für 6 bilder, wieder die Selbe Nummerierung wie früher
bsp1_x
bsp2_x
bsp3_x
...

lg Masda
 
Zuletzt bearbeitet:
Kommt Zeit, kommen JS Kenntnisse :)

und - Thema als erledigt markieren bitte nicht vergessen :D - wollt das immer schon mal sagen ^^

lg
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück