✔ OnClick Textübergabe

[Funster]

Hi,

kann mir bitte jamand bei folgendem Problem behilflich sein.

Ich habe eine kleine Bildergalerie, bei der bei klicken auf ein Thumb, die vergrößerte Darstellung gleich links daneben ausgetauscht wird. das erledige ich mit folgendem Script:

 function change(inhalt) { 
   document.getElementById('images').src  = inhalt;
 }

<a href="#" onclick="change(\'http://www.test.com/gallery/images/'.$daten['Image'].'\')"><img src="http://www.test.com/gallery/thumb/'.$daten['Image'].'" alt="Bild" />

Jetzt habe ich aber das Problem, dass in der Datenbank (MySQL), wo auch die Bildinformationen ausgelesen werden (via PHP), auch eine Kurzbeschreibung zu dem jeweiligen Bild vorhanden ist. Nur wie bekomme ich die jetzt unter das Bild - also wie kann ich bei dem schon verfügbaren OnClick-Event jetzt noch den Text mit übergeben und wie kann ich den dann unter dem Bild ausgeben?

 

[Sven Mintel]

Füge dort, wo du den Text haben möchtest, eine Element(p, span, div o.ä.) ein, und weise dessen innerHTML-Eigenschaft den gewünschten Text zu.

 

[con-f-use]

Etwas ausführlicher:
Du schreibst einfach mittels php versteckte (style="display: none;") <div>s in dein Dokument und gibt ihnen eine eizigartige id, die du dem Bild zordnen kannst z.B. id="TextBild1". Diese <div>s haben den jeweiligen Text zum Bild als Inhalt.
In das Bild kannst du dann einen onlick (ebenfalls mit php) reinschreiben. Der muss dann bei Klick das Richtige <div> sichtbar, und alle anderen unsichtbar machen. Die ensprechende Funktion für den onlick könnte so aussehen:

function showPic(strId) {
     // Verstecken der anderen <div>s      
    for (var i=1; i<ANZAHLderBILDER; i++)
       if( obj = document.getElmentById('TextBild'+i) )
           obj.style.display = 'none';
    // Einblenden des richtigen <div> (mit der des Funktionsparameters strId)
    if ( obj = document.getElementById(strId) )
        obj.syle.display = 'block';
}

/* Aufgerufen über
 * onclick="showPic('TextBild1')"
 */

Das hat freilich den Nachteil, dass die Texte von allen Bildern immer mitübertragen werden, bei jedem Seitenaufruf. Wenn's lange und viele Texte sind ist das unerwünscht, dann solltest du die sachen über den wesentlich komplizierten XMLHttpRequest machen, anstatt sie einfach mit php reinzuschreiben.

 

[Funster]

Vielen Dank für eure Hilfe. Ich habe jetzt aber eine andere, optimale, Lösung für mein Problem gefunden.

Wenn es interessiert (vielleicht für ähnliche Problemfälle):

Der Link:

$column='<td width="125" align="center"><a href="#" onclick="change(\'http://www.test.com/gallery/images/'.$daten['Image'].'\',\''.$daten['Description_uk'].'\')"><img src="http://www.test.com/gallery/thumb/'.$daten['Image'].'" alt="Test" /></a></td>';

Die Funktion:

 function change(inhalt,data) { 
   document.getElementById('images').src  = inhalt;
   document.getElementById('Image_desc').innerHTML = data;
   }

Der DIV-Container in dem der Text, der direkt unter dem Bild ist, ausgegeben wird:

<div id="Image_desc" class="Image_desc"></div>

Und hier noch die Formatierung des DIV:

.Image_desc {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	height: 35px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}

Besten Dank

 

[con-f-use]

Was dabei ein wenig unschön ist, ist das die Textdaten als String-Literale im onclick stehen. Das finde ich irgentwie unübersichtlich und unsauber. Außerdem bekommen reine Textbrowser damit Probleme. Aber das ist nicht so wichtig.