[GastForen Programmierung/Entwicklung JavaScript Bild und Legende auswechseln

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Bild und Legende auswechseln

spatium
Beiträge gesamt:

18. Mär 2007, 14:44
Beitrag # 1 von 7
Bewertung:
(1922 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>

X

Bild und Legende auswechseln

SabineP
Beiträge gesamt: 7586

18. Mär 2007, 16:05
Beitrag # 2 von 7
Beitrag ID: #282392
Bewertung:
(1908 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:
(1903 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:
(1899 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:
(1896 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:
(1891 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:
(1872 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]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/