HilfDirSelbst.ch: Programmierung/Entwicklung: JavaScript: thumbnail mit Rahmen wenn Aktiv

thumbnail mit Rahmen wenn Aktiv

darkStar

Beiträge gesamt: 4

17. Mai 2011, 11:34
Bewertung:

gelesen: 3039

Beitrag als Lesezeichen

Hallo

Ich habe eine Bildergalerie mit Thumbnails und einer Grossansicht. Wenn ein Thumbnail in der Grossansicht aktiv ist, sollte dieses Thumbnail dann markiert/ umrandet sein.

Bildwechsel:

Code

 <script type="text/javascript" language="JavaScript"> 
<!-- 
//Bilder tauschen 
function swap(Bildname,BildURL,BildTitel) 
{ 
document.images[Bildname].src = BildURL; 
document.getElementById('bild_titel').innerHTML=BildTitel; 
} 
//--> 
</script>

Aufruf (thumbs werden in einer mysql/php-schleife generiert):

Code

<a href="#" onClick="swap('bild1','news/upload/bilder/<?php echo $row->bild;?>','<?php echo $row->bildtitel;?>');" onmouseover="Tip('<img src=\'news/upload/bilder/thumbs/<?php echo $row->bild;?>\' />')"> 
<img id="<?php echo $x;?>" src="news/upload/bilder/thumbs/<?php echo $row->bild;?>" border="0" class="thumbs"></a>

Wie muss ich den Code ergänzen, das das entsprechende thumbnail markiert ist? Jemand ev. ein Tipp für mich?

thumbnail mit Rahmen wenn Aktiv

crisies

Beiträge gesamt: 136

25. Mai 2011, 23:42
Bewertung:

gelesen: 2988

Beitrag als Lesezeichen

hi darkstar,

ich denke das markieren wäre hier nicht das problem, vielmehr das demarkieren sobald ein anderes thumbnail geladen wird. Du kannst dafür entweder ein hidden-Formfield verwenden um dort die ID das aktuell aktivierte Bildes reinzuschreiben oder du machst es über eine "globale" JS-Variabel.

So könntest Du markieren/demarkieren:

Code

var activeTumb = '0'; 
function swap(Bildname,BildURL,BildTitel,Thumb)  
{  
document.getElementById(activeTumb ).style.border = '0'; 
activeTumb = Thumb; 
document.getElementById(Thumb).style.border = '1px solid';  
document.images[Bildname].src = BildURL;  
document.getElementById('bild_titel').innerHTML=BildTitel;  
}

Code

<a href="#" onClick="swap('bild1','news/upload/bilder/<?php echo $row->bild;?>','<?php echo $row->bildtitel;?>','<?php echo $x;?>');" onmouseover="Tip('<img src=\'news/upload/bilder/thumbs/<?php echo $row->bild;?>\' />')">  
<img id="<?php echo $x;?>" src="news/upload/bilder/thumbs/<?php echo $row->bild;?>" border="0" class="thumbs"></a>

gruss
chris.w.
*************************************
Chris Würsch
http://www.chriswuersch.com
*************************************

thumbnail mit Rahmen wenn Aktiv

darkStar

Beiträge gesamt: 4

26. Mai 2011, 04:50
Bewertung:

gelesen: 2976

Beitrag als Lesezeichen

Hi Chris

Super!
Vielen Dank für Deine Hilfe!

Lg