hallo
ich bin gerade dabei eine showhide-funktion zu erarbeiten.
ich mache so eine art bildergallerie. wenn man auf die kleine vorschaubilder klickt, erscheint dann rechts das große bild.
ich möchte es so haben, wenn man auf das nächste vorschaubild klick, soll das vorige große bild wieder verschwinden und das aktuelle bild soll groß erscheinen.
soweit funktioniert auch alles, aber ich weiß nicht, wie man es hinbekommt, dass das vorige große bild verschwindet.
es geht erst weg, wenn man ein zweites mal auf das vorschaubild klickt.
das geb ich in den quelltext ein:
(bei den kleinen vorschaubildern)
<a href="#" onclick="ShowHide('layer2')">
<img src="bilder/g-stillleben.jpg" alt="" height="60" width="60" border="0">
</a>
die layer sind im head so definiert:
<style type="text/css" media="screen">
<!--
#layer2 { visibility: hidden; position: absolute; top: 116px; left: 406px; width: 100%; height: 100% }
--></style>
...und im body:
<div id="layer2"><img src="bilder/g-stilllebeng.jpg" width="100%"></div>
showhide layers
-
ohne das javascript, das dahinterliegt bringt dein posting nix.. hier kann niemand hellsehen..
habs auch mal in den richtigen bereich verschoben -
ja is doch einfach
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="de" /> <style type="text/css"> .thumb{ height:100px; width:100px; } .show{ width:320px; } </style> <script type="text/javascript"> /*<![CDATA[*/ function show(url){ var target = document.getElementById('showpic'); target.src=url; } /*]]>*/ </script> </head> <body> <img onmouseover="show('hier die url vom grossen bild reinschreiben')"; src="hier ne url von nem kleinen vorschaubild reinkloppen" class="thumb" /> <img id="showpic" src="hier ne url vom ersten grossen bild reinkloppen" class="show" /> </body> </html> -
also probier es mal so
is ungetestetHTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="de" /> <style type="text/css"> .thumb{ height:100px; width:100px; } .show{ width:320px; } </style> <script type="text/javascript"> /*<![CDATA[*/ function ShowHide(id) { obj = document.getElementById(id); if (obj.style.visibility == 'visible'){obj.style.visibility = 'hidden';} else {obj.style.visibility = 'visible';} /*]]>*/ </script> </head> <body> <img onmouseover="ShowHide('layer_xyz')" src="hier ne url von nem kleinen vorschaubild reinkloppen" class="thumb" /> <img id="showpic" src="hier ne url vom ersten grossen bild reinkloppen" class="show" /> </body> </html> -
wenn ich diesen quelltext eingebe, hab ich das problem, was ich anfangs schon hatte.
das erste bild verschwindet erst, wenn ich ein zweites mal mit der maus drübergehe.
ich habe auch noch mal den quelltext mit deiner ersten lösung komplett neu geschrieben. allerdings werden jetzt alle großen bilder auf einmal gezeigt. da ist nix versteckt.
so sieht der quelltext aus.
<script type="text/javascript">
/*<![CDATA[*/
function show(url){var target = document.getElementById('showpic');
target.src=url;}
/*]]>*/
</script>
</head>
<body >
<img onmouseover="show('bilder/g-flascheng.jpg')"
src="bilder/flaschen.jpg" alt="" height="60" width="60" border="0"
style="position:absolute; top:0px; left:0px">
<img onmouseover="show('bilder/g-stillleben.jpg')"
src="bilder/stillleben.jpg" alt="" height="60" width="60" border="0"
style="position:absolute; top:0px; left:70px">
<img id="showpic" src="bilder/g-flaschen.jpg">
<img id="showpic" src="bilder/g-stillleben.jpg">
</body>
</html>
eigentlich so, wie du geschrieben hattest. keine ahnung, warum es bei dem anderen dokument funktioniert hatte. das war aber so unübersichtlich geworden, weil ich erst mit tabelle gearbeitet hatte, darum hab ich alles neu gemacht.
und dann ist da noch was. wenn ich das neue dokument in golive öffnen will, erscheint die fehlermeldung, dass die großen bilder keinen eindeutigen namen habe und dass die bilder umbenannt werden
wenn ich dann ok klicke ist schon mal der fortschritt, dass das große bild in den vordergrund rückt, was ich auch sehen will (also wenn ich auf das vorschaubild klicke). allerdings sind die anderen bilder immer noch im hintergrund zu sehen.
im quelltext wird auch die id nummeriert.
das sieht dann so aus:
<img id="showpic" src="bilder/..." ...>
<img id="showpic2" src="bilder/..." ...> -
poste mal bitte den code von der kompletten galerie
an sich kannste dir durch das script nämlich ne menge code ersparen, da kannste nämlich alle bilder in ein array packen und gut is, dann brauchste auch net mehr die ganze url im funktionsaufruf, sondern nur noch ne bild-IDund evtl bringt dich das hier weiter: https://www.forum-hilfe.de/showthread.php?t=42197
-
also ich würd die bilder alle in ein array packen und nur iene einzige anzeige bauen.... und da dann nich mit visible und hidden werkeln sondern einfach die src ersetzen
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="de" /> <style type="text/css"> .thumb{ height:100px; width:100px; } .show{ width:320px; } </style> <script type="text/javascript"> /*<![CDATA[*/ var bilder = new Array(); bilder[0] = new Image(); bilder[0].src = "hier kommt die url vom grossen bild0 rein"; bilder[1] = new Image(); bilder[1].src = "hier kommt die url vom grossen bild1 rein"; bilder[2] = new Image(); bilder[2].src = "hier kommt die url vom grossen bild rein"; function show(id){ var target = document.getElementById("showpic"); target.src=bilder[id].src; } /*]]>*/ </script> </head> <body> <img onmouseover="show('hier die ID vom grossen bild reinschreiben')"; src="hier ne url von nem kleinen vorschaubild reinkloppen" class="thumb" /> <img id="showpic" src="hier ne url vom ersten grossen bild reinkloppen" class="show" /> </body> </html>
so wär des echt die einfachste variante auch wenn du da nochmal etwas umschreiben müsstest, aber so wird der code wesentlich schlanker -
was soll ich sagen, es funktioniert immer noch nicht. es zeigt alle bilder auf einmal an und wenn ich die vorschaubilder anklicke funktioniert auch nix.
bin ich wirklich zu blöd dafür???
bei der id schreib ich doch nur die bildnummer hin oder?
und da ist dann auch wieder das problem mit dem showpic. sobald ich das dokument schließe und neu öffne, kommt wieder die fehlermeldung mit den bildern und die id="showpic" wird nummeriert, wodurch es aber auch nicht besser wird. nur das halt wieder das aktuelle bild in den vordergrund rückt.
also das wäre mein quelltext. stimmt der überhaupt?
HTML
Alles anzeigen<script type="text/javascript"> /*<![CDATA[*/ var bilder = new Array(); bilder[0] = new Image(); bilder[0].src = "bilder/g-flascheng.jpg"; bilder[1] = new Image(); bilder[1].src = "bilder/g-stilllebeng.jpg"; function show(id) {var target = document.getElementById("showpic"); target.src=bilder[id].src;} /*]]>*/ </script> </head> <body> <img onclick="show('0')" src="bilder/g-flaschen.jpg" style="position:absolute; top:120px; left:160px"> <img onclick="show('1')" src="bilder/g-stillleben.jpg" style="position:absolute; top:120px; left:250px"> <img id="showpic" src="bilder/g-flascheng.jpg" style="position:absolute; top:120px; left:360px"> <img id="showpic" src="bilder/g-stilllebeng.jpg" style="position:absolute; top:120px; left:360px"> -
mach mal nur ein grosses bild und nenn des showpic.. der fehler kommt bestimmt, weil du zweimal die gleiche ID benutzt.. IDs müssen eindeutig sein.
und nimm mal abstand von position absolute....mach mal ne separate datei auf und kopiere da meinen code rein, speichere sie mal im gleichen ordner wie die datei, an der du eigentlich herumwerkelst... und dann füge nur die bild-urls ein
-
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="de" /> <style type="text/css"> .thumb{ height:100px; width:100px; } .show{ width:320px; } </style> <script type="text/javascript"> /*<![CDATA[*/ var bilder = new Array(); bilder[0] = new Image(); bilder[0].src = "http://home.arcor.de/aviaticus.ger/pix/galerie/babyprinco.jpg"; bilder[1] = new Image(); bilder[1].src = "http://home.arcor.de/synaptic/hilfe/js_gal/08.jpg"; function show(id){ var target = document.getElementById("showpic"); target.src=bilder[id].src; } /*]]>*/ </script> </head> <body> <img onmouseover="show('0')"; src="http://home.arcor.de/aviaticus.ger/pix/galerie/babyprinco.jpg" class="thumb" /> <img onmouseover="show('1')"; src="http://home.arcor.de/synaptic/hilfe/js_gal/08_t.jpg" class="thumb" /> <br /> <img id="showpic" src="hier ne url vom ersten grossen bild reinkloppen" class="show" /> </body> </html>
kopiere diesen code in eine separate datei und dann siehst du wie es funktioniert...
hab für das hundethumbnail-dings das grosse bild genommen, hab dafür kein kleines zur hand..!
und position: absolute sollte man nur dann benutzen, wenn man damit umgehen kann und weiß wie es funktioniert..
für deinen fall war es ursprünglich nötig, um den divs bzw img die gleiche position zu geben, so dass sie über einander gelegen haben..
bei meiner variante brauchste das an sich net.. aber is dein ding, ich ill dir net vorschreiben was du zu tun hast.. ich helfe lediglich beim javascript und zeige dir wie des mit nem schlanken code realisierbar ist