onclick auf Bild - Inhalt eines DIVs ändern

[skavenger]

Hallo Leute,

Ich habe hier ein 2-spaltiges Layout mit 2 DIVs.
Im ersten DIV gibt es eine große Grafik
Darunter gibt es vier kleine Grafiken
Im rechten DIV steht Text.
Wenn ich nun auf eines der kleinen Bilder im DIV1 klicke, möchte ich, das sich sowohl das darüber befindliche große Bild, als auch der Text des rechten DIVs ändert.
Wechsel des Bildes konnte ich mit JS realisieren, habe jedoch keine Idee, wie ich das rechte DIV bein onclick ebenfalls ändern kann.

Ein Hinweis, wie ich via onclick den Inhalt des rechten DIVs ändere, würde mir schon fast reichen.

Habt Ihr da Ideen oder Vorschläge?

Danke im Voraus

 

[bodil]

SELFHTML: JavaScript / Objektreferenz / all

 

[Tronjer]

Der Eventhandler für die vier kleinen Bilder könnte in jQuery etwa so aussehen. Habe das jetzt nicht überprüft, aber die Logik dahinter ist: Beim Klick wird die aktuelle ID in einer Variablen gespeichert, über eine for-Schleife mit dem Inhalt des Arrays selectors abgeglichen, und bei einem Treffer werden das source Attribut sowie das innerHTML der beiden anderen DIVs ersetzt - analog zu ihrer Position im Array.

        $(this).click(function() {
            var bigImages = ['big1.jpg', 'big2.jpg', 'big3.jpg', 'big4.jpg'];
            var newText = ['Text1', 'Text2', 'Text3', 'Text4'];
            var selectors = ['#one', '#two', '#three', 'four'];
            var currentID = $('this').attr('id');
    
            for (var i = 0; i < selectors.length; i++) {
                if (selectors === currentID) {
                    $('#big_image').attr('src', bigImages[i]);
                    $('#right_div').html(newText[i]);
                }
            }        
        });

 

[skavenger]

Ich habe die Lösung allein gefunden:

<script type="text/javascript">
function show(target){
document.getElementById(target).style.visibility = 'visible';
}
function hide(target){
document.getElementById(target).style.visibility = 'hidden';
}
</script>

<a href="#" onclick="show('right_col'); hide('right_col1'); hide('right_col2'); hide('right_col3');"><img src="bilder/detail-start_s.jpg" name="Bild9" width="135" height="90" border="0" id="Bild9" /></a>
<a href="#" onclick="hide('right_col'); show('right_col1'); hide('right_col2'); hide('right_col3');"><img src="bilder/detail-start_s.jpg" name="Bild10" width="135" height="90" border="0" id="Bild10" /></a>
<a href="#" onclick="hide('right_col'); hide('right_col1'); show('right_col2'); hide('right_col3');"><img src="bilder/detail-start_s.jpg" name="Bild11" width="135" height="90" border="0" id="Bild11" /></a>
<a href="#" onclick="hide('right_col'); hide('right_col1'); hide('right_col2'); show('right_col3');"><img src="bilder/detail-start_s.jpg" name="Bild12" width="135" height="90" border="0" id="Bild12" /></a>

<div id="right_col" style="visibility: visible;"><p>Infos zu Bild 1</p></div>
<div id="right_col1" style="visibility: hidden;"><p>Infos zu Bild 2</p></div>
<div id="right_col2" style="visibility: hidden;"><p>Infos zu Bild 3</p></div>
<div id="right_col3" style="visibility: hidden;"><p>Infos zu Bild 4</p></div>

#right_col, #right_col1, #right_col2, #right_col3 { width: 210px; float: right; margin: 0px; min-height: 200px; }
#right_col1, #right_col2, #right_col3 { position:absolute; margin-left: 650px;}

Per Standard wird das DIV #right_col angezeigt.
Bei Klick auf Bild 2 wird das DIV #right_col2 sichtbar, alle anderen DIVs werden unsichtbar.

Klappt wunderbar.

Falls Ihr Fragen habt, immer her damit.