thumbnail mit Rahmen wenn Aktiv

[Gast] Foren Programmierung/Entwicklung JavaScript thumbnail mit Rahmen wenn Aktiv

Programmierung/Entwicklung

Themen

Beiträge

Moderatoren

Letzter Beitrag

JavaScript

1409

5349

Thomas Richard

21. Nov 2023, 13:57

Martin Fischer

darkStar

Beiträge gesamt: 4

17. Mai 2011, 11:34
Beitrag # 1 von 3
Bewertung:
(3041 mal gelesen)
URL zum Beitrag
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
Beitrag # 2 von 3
Beitrag ID: #472316
Bewertung:
(2990 mal gelesen)
URL zum Beitrag
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.

als Antwort auf: [#471626]