Bilder mit onclick vergrößern in einem anderen div

[KlTeufelchen84]

Hallo an alle,

folgendes Problem habe ich:
Ich möchte gerne das die Thumbnails beim anklicken in einem anderen div in gross geöffnet werden. Bei meinem Code zeigt mir aber der Browser nur den alt-Text an..

function init()
        {
            document.getElementById("platz").src = "bilder/platzhalter_gross.png";
        }
        
        var fotos = new Array ()
        fotos[0] = new Image(); 
        fotos[0].src = "bilder/platzhalter_gross.png";
        fotos[1] = new Image(); 
        fotos[1].src = "bilder/platzhalter_gross_2.png";
        fotos[2] = new Image(); 
        fotos[2].src = "bilder/platzhalter_gross.png";
        fotos[3] = new Image(); 
        fotos[3].src = "bilder/platzhalter_gross_2.png";    
        fotos[4] = new Image(); 
        fotos[4].src = "bilder/platzhalter_gross.png";
        fotos[5] = new Image(); 
        fotos[5].src = "bilder/platzhalter_gross_2.png";    
        fotos[6] = new Image(); 
        fotos[6].src = "bilder/platzhalter_gross.png";
        fotos[7] = new Image(); 
        fotos[7].src = "bilder/platzhalter_gross_2.png";    
        fotos[8] = new Image(); 
        fotos[8].src = "bilder/platzhalter_gross.png";    
        
        var zahl=0;
        
        function onclick()
        {
            init();
            document.getElementById("platz").src = fotos[zahl];
        }

    <div id="content">
        <div id="bild">

            <div id="gross">
                <img id="platz" src="bilder/platzhalter_gross.png" alt="Ansicht" />
            </div>            
            
        </div>
        


        
        <div id="text">
            <div id="thumbnails">
                <a href="#" onclick="javascript:onclick(1)" id="Bild1">  
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                        
                <a href="#" onclick="javascript:onclick(2)" id="Bild2">
                    <img class="thumb" src="bilder/platzhalter_2.png" alt="#" />        
                </a>
                
                <a href="#" onclick="javascript:onclick()" id="Bild3">
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                                  
            </div>
        </div>

Wenn ich es so machen, dann funktioniert es aber ich wollte den Code gerne kürzer haben (insgesamt sind es nälich 9 Bilder) und ich weiß dass es irgendwie möglich ist

        function Anzeigen()
        {
            document.getElementById("platz").src = "bilder/platzhalter_gross.png";
        }
        
        function init()
        {
            document.getElementById("platz").src = "bilder/platzhalter_gross.png";
        }
                
        function Bild1() 
        {
            init();
            document.getElementById("platz").src = "bilder/platzhalter_gross.png";
        }
        
        function Bild2() 
        {
            init();
            document.getElementById("platz").src = "bilder/platzhalter_gross_2.png";
        }
                        
        function Bild3() 
        {
            init();
            document.getElementById("platz").src = "bilder/platzhalter_gross.png";
        }

<div id="thumbnails">
                <a href="#" onclick="javascript:Bild1()" id="Bild1">  
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                        
                <a href="#" onclick="javascript:Bild2()" id="Bild2">
                    <img class="thumb" src="bilder/platzhalter_2.png" alt="#" />        
                </a>
                
                <a href="#" onclick="javascript:Bild3()" id="Bild3">
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
            </div>

 

[threadi]

Bei deinem ersten Beispiel (welches auch das bessere ist) fügst Du ein JavaScript-Objekt in das src-Attribut ein. Du hast 2 Möglichkeiten:

Entweder Du verzichtest darauf jedes Bild als Objekt und einfach nur als String zu definieren.

Oder Du ergänzt "src" an der Stelle:

document.getElementById("platz").src = fotos[zahl][COLOR=red].src[/COLOR];

 

[KlTeufelchen84]

Keine Änderung

Danke für den Tipp, aber es ändert sich nichts wenn ich den Code so mache:

        var fotos = new Array ("bilder/platzhalter_gross.png", "bilder/platzhalter_gross_2.png", "bilder/platzhalter_gross.png");
        var zahl=0;
        
        function onclick()
        {
            document.getElementById("platz").src = fotos[zahl].src;
        }

<div id="thumbnails">
                <a href="#" onclick="javascript:onclick(0)" id="Bild1">  
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                        
                <a href="#" onclick="javascript:onclick(1)" id="Bild2">
                    <img class="thumb" src="bilder/platzhalter_2.png" alt="#" />        
                </a>
                
                <a href="#" onclick="javascript:onclick(2)" id="Bild3">
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                                  
            </div>

 

[KlTeufelchen84]

Erledigt

Es funktioniert. Hab den Code anders (einfacher) geschrieben:

    <script type="text/javascript">

            function vergroessern(nummer) {
            var neu = new Image();
            neu.src=nummer;

            var alt = document.images['platz'];
            alt.src = neu.src;
            }     
        
    </script>

<div id="thumbnails">
                <a href="javascript:vergroessern('bilder/platzhalter_gross.png')">  
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                        
                <a href="javascript:vergroessern('bilder/platzhalter_gross_2.png')">  
                    <img class="thumb" src="bilder/platzhalter_2.png" alt="#" />        
                </a>
                
                <a href="javascript:vergroessern('bilder/platzhalter_gross.png')">  
                    <img class="thumb" src="bilder/platzhalter.png" alt="#" />        
                </a>
                                  
            </div>

 

[threadi]

Du hast bei deinem ersten Versuch nicht berücksichtigt, dass ich "entweder .. oder" geschrieben hatte. Du hast statt dessen beide Vorschläge zusammen verwendet, was natürlich nicht möglich ist.

Aber so geht es auch, viele Wege führen nach Rom ;) Aber ich würde dir raten noch die Variablennamen anzupassen. "nummer" für einen String mit einem Bildpfad ist inhaltlich nicht ganz korrekt. In 6 Monaten weißt Du es nicht mehr und dann wunderst du dich darüber.

 

[KlTeufelchen84]

Danke für den Tipp.
Das "entweder... oder" hab ich nachher auch gesehen, kommt davon wenn man zu schnell liest :-D

Nun bin ich aber in Rom angekommen und es funktioniert und so bin ich mal wieder ein bißchen schlauer als vorher *hihi*