Bild und Legende auswechseln

[Gast] Foren Programmierung/Entwicklung JavaScript Bild und Legende auswechseln

Programmierung/Entwicklung

Themen

Beiträge

Moderatoren

Letzter Beitrag

JavaScript

1411

5354

Thomas Richard

28. Feb 2024, 15:17

Nic1703

spatium

Beiträge gesamt:

18. Mär 2007, 14:44
Beitrag # 1 von 7
Bewertung:
(1998 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo

Ich habe hier ein kleines Script, um ein Image mit dem Namen "bild" per Klick mit einer neuen Source zu versehen. Nun würde ich gerne den gleichen Klick verwenden, um auch die Bildlegende (hier "AAAAAAAAA") auszuwechseln. Und das ganze soll für einen Laien und für ca. 100 Bilder ähnlich einfach zu handhaben sein, wie das Auswechseln der Bildquelle.

Nun hab ich nicht die leiseste Ahnung von Javascript und stelle mir das warscheinlich etwas zu einfach vor, oder?

Code

<HTML> 
<HEAD>	 
<script type="text/javascript"> 
    function bildwechsel(img_name,src){ 
        document.images[img_name].src = src; 
    } 
</script> 
</HEAD> 
 
<BODY> 
<img name="bild" src="bild1.jpg"> 
<br><br> 
 
Legende: AAAAAAAAAAA 
<br><br><br><br> 
 
<div onclick="javascript:bildwechsel('bild','bild2.jpg');"  style="background:black; width:50px; height:50px; cursor:pointer; margin-bottom:10px; "></div> 
<div onclick="javascript:bildwechsel('bild','bild3.jpg');"  style="background:black; width:50px; height:50px; cursor:pointer;"></div> 
 
</BODY> 
</HTML>

Bild und Legende auswechseln

SabineP

Beiträge gesamt: 7586

18. Mär 2007, 16:05
Beitrag # 2 von 7
Beitrag ID: #282392
Bewertung:
(1984 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Spatium,

so kannst Du Text und Bild auswechseln:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     
<HTML>     
<HEAD>     
 
<TITLE> New Document </TITLE>     
 
<style type="text/css">     
#bild1{visibility:visible;position:absolute}  
#bild2{visibility:hidden;position:absolute}  
#bild3{visibility:hidden;position:absolute}  
.schwarz{background:black; width:50px; height:50px; cursor:pointer; margin-bottom:10px;} 
</style>    
 
<script type="text/javascript">      
<!--      
function ein(divid){document.getElementById(divid).style.visibility="visible";} 
function aus(divid){document.getElementById(divid).style.visibility="hidden";} 
//-->      
</script>    
</HEAD>     
 
<BODY>  
 
<div id="bild1"><img src="bild1.jpg"><br>Legende1</div>  
<div id="bild2"><img src="bild2.jpg"><br>Legende2</div>  
<div id="bild3"><img src="bild3.jpg"><br>Legende3</div> 
<br><br><br><br> 
<div class="schwarz" onclick="ein('bild2'),aus('bild1'),aus('bild3')"></div> 
<div class="schwarz" onclick="ein('bild3'),aus('bild1'),aus('bild2')"></div> 
 
</BODY>     
</HTML>

als Antwort auf: [#282385]
(Dieser Beitrag wurde von SabineP am 18. Mär 2007, 16:07 geändert)

Bild und Legende auswechseln

spatium

Beiträge gesamt:

18. Mär 2007, 16:18
Beitrag # 3 von 7
Beitrag ID: #282395
Bewertung:
(1979 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sabine

Vielen Dank ... auch fürs Aufräumen.
Das funktioniert soweit tiptop. Das unhandliche daran ist, dass ich so mit onclick jeweils alle anderen ids einzeln ausblenden muss und das gibt mit bis 100 IDs ganz schön lange Zeilen.

Noch was: Wenn ein Img per Visibilty versteckt wird, wird es dann auch nicht geladen?

Lieber Gruss
Jürgen

als Antwort auf: [#282392]

Bild und Legende auswechseln

SabineP

Beiträge gesamt: 7586

18. Mär 2007, 17:03
Beitrag # 4 von 7
Beitrag ID: #282408
Bewertung:
(1975 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Jürgen,

>> und das gibt mit bis 100 IDs ganz schön lange Zeilen

Du möchtest 100 Bilder und die Beschreibung dazu mit Javascript ein- und ausblenden?
Eine clientseitige Programmiersprache wie Javascript ist dafür eher ungeeignet.

>> Wenn ein Img per Visibilty versteckt wird, wird es dann auch nicht geladen?

Ja.

Gruß Sabine

als Antwort auf: [#282395]

Bild und Legende auswechseln

spatium

Beiträge gesamt:

18. Mär 2007, 17:21
Beitrag # 5 von 7
Beitrag ID: #282410
Bewertung:
(1972 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

... hmmm.
Kann man denn nicht mit Javascript eine im Klick definierte Textzeile irgenwo hin setzen? So quasi onClick="javascript:schreibe(<span> blabla</span>)"

als Antwort auf: [#282408]

Bild und Legende auswechseln

ganesh

Beiträge gesamt: 1981

18. Mär 2007, 18:03
Beitrag # 6 von 7
Beitrag ID: #282412
Bewertung:
(1967 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Das ist ziemlich banal... benutze einfach innerHTML:

Code

<img src="bild1.jpg" style="width: 750px; height: 500px; border: 0;" alt="foo bar" id="bild" name="bild" /> 
<br /> 
<div id="legende">Agave</div> 
 
<ul> 
	<li><a href="#" onclick="yo('bild1.jpg','Agave'); return false;">Bild 1</a></li> 
	<li><a href="#" onclick="yo('bild2.jpg','Eisbär'); return false;">Bild 2</a></li> 
	<li><a href="#" onclick="yo('bild3.jpg','Magdalena'); return false;">Bild 3</a></li> 
</ul> 
 
 
<script> 
function yo(s,t) { 
	document.images.bild.src=s; 
	document.getElementById('legende').innerHTML = t; 
} 
</script>

als Antwort auf: [#282410]

Bild und Legende auswechseln

spatium

Beiträge gesamt:

19. Mär 2007, 11:27
Beitrag # 7 von 7
Beitrag ID: #282516
Bewertung:
(1948 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Super. Genau so hab ich mir das vorgestellt.
Hätt ich mein Anliegen nur präziser formuliert, hättest du nicht solche Umstände gehabt.

Vielen Dank für deine Mühe.
Jürgen

als Antwort auf: [#282412]

Aktuell

PDF / Print

MadeToTag mit neuer Vorgaben-Funktion und umfangreichen Verbesserungen

| 04.04.2024

Weitere Events

Neuste Foreneinträge

Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Absatzsetzer in CC24 ME lösen Probleme aus

Barrierefreie PDFs | Mögliche unangebrachte Verwendung des Strukturelements xy

Barrierefreiheit in indesign 2022: figure-Tags haben als Attributobjekt "block" statt "inline"?

Kontrollkästchen in PDF-Formular

Indesign Tabelle ausrichten

Quark Objekte lassen sich nicht neben Layout ziehen.

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

InDesign 19.2 konvertiert 19.3-Dateien beim Öffnen ungefragt

Platzierte Vektorgrafiken skalieren

Weitere Stellenangebote