showhide layers

aila

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">
</style>

...und im body:
<div id="layer2"><img src="bilder/g-stilllebeng.jpg" width="100%"></div>

synaptic

ohne das javascript, das dahinterliegt bringt dein posting nix.. hier kann niemand hellsehen..
habs auch mal in den richtigen bereich verschoben

aila

oh sorry, hab ich vergessen zu ergänzen.
javascript hab ich natürlich auch im quelltext.

<script type="text/javascript">

</script>

den script hab ich im internet gefunden. muss ich da möglicherweise hier etwas ändern?

im prinzip möchte ich so eine funktion haben, wie bei den bildern auf dieser website:
http://www.grossartwork.com/html/hair.html

da ist mir aber der quelltext zu kompliziert und ich blicke bei den scripten nicht durch.

synaptic

ja is doch einfach

HTML

<!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>

Alles anzeigen

aila

danke

funktioniert auch.

geht das auch, dass ich nicht immer die url der großen bilder eingeben muss?
vielleicht wo ich nur 'Layer1', 'layer2'...eingeben muss, da ich die ja schon vorher als ebene definiert hatte.

<style type="text/css" media="screen">
</style>

synaptic

also probier es mal so is ungetestet

HTML

<!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>

Alles anzeigen

aila

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/..." ...>

synaptic

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-ID

und evtl bringt dich das hier weiter: https://www.forum-hilfe.de/showthread.php?t=42197

aila

HTML

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <meta name="generator" content="Adobe GoLive">
  <title>Unbenannte Seite</title>
  <style type="text/css" media="screen"><!--
#navigation { background-image: url(bilder/hintergrund.png); visibility: visible; position: absolute; top: 60px; left: 0; width: 100%; height: 30px }
#fenster  { background-color: #eaeaea; visibility: visible; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
#kopfzeile { background-image: url(bilder/farbstreifen.png); visibility: visible; position: absolute; top: 0; left: 0; width: 100%; height: 60px }
#navigationseite { background-image: url(bilder/farbstreifen.png); visibility: visible; position: absolute; top: 0; left: 0; width: 130px; height: 100% }
--></style>
<script type="text/javascript">
/*<![CDATA[*/
function show(url){
var target = document.getElementById('showpic'); 
target.src=url;
}
/*]]>*/
</script>
  <csscriptdict import>
   <script type="text/javascript" src="[URL]file:///C:/.../Adobe/Adobe%20GoLive/Settings7/JScripts/GlobalScripts/CSScriptLib.js"></script[/URL]>
  </csscriptdict>
  <csactiondict>
   <script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
 if (document.images) {
  pre_buttonm_ro = newImage('bilder/buttonm-ro.png');
  pre_buttonm_u = newImage('bilder/buttonm-u.png');
  pre_buttonp_ro = newImage('bilder/buttonp-ro.png');
  pre_buttonp_u = newImage('bilder/buttonp-u.png');
  pre_buttons_ro = newImage('bilder/buttons-ro.png');
  pre_buttons_u = newImage('bilder/buttons-u.png');
  pre_buttoni_ro = newImage('bilder/buttoni-ro.png');
  pre_buttoni_u = newImage('bilder/buttoni-u.png');
  pre_buttonf_ro = newImage('bilder/buttonf-ro.png');
  pre_buttonf_u = newImage('bilder/buttonf-u.png');
  preloadFlag = true;
 }
}
// --></script>
  </csactiondict>
 </head>
 <body onload="preloadImages();"  background="bilder/farbstreifen.png" style="margin:0; padding:0" bgcolor="#1b8104" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
  <div id="fenster"></div>
  <div id="navigationseite"></div>
  <div id="navigation"></div>
  <div id="kopfzeile"></div>
  <p><a href="grafik.html" target="_self"><img id="buttong" border="0" name="buttong" src="bilder/buttong-u.png" alt="Grafik" style="position:absolute; top:120px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttonm','bilder/buttonm-u.png');return true" onmouseup="changeImages('buttonm','bilder/buttonm-ro.png');return true" onmouseover="changeImages('buttonm','bilder/buttonm-ro.png');return true" onmouseout="changeImages('buttonm','bilder/buttonm.png');return true" href="malerei.html" target="_self"><img id="buttonm" border="0" name="buttonm" src="bilder/buttonm.png" alt="Malerei" style="position:absolute; top:150px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttonf','bilder/buttonf-u.png');return true" onmouseup="changeImages('buttonf','bilder/buttonf-ro.png');return true" onmouseover="changeImages('buttonf','bilder/buttonf-ro.png');return true" onmouseout="changeImages('buttonf','bilder/buttonf.png');return true" href="fotografie.html" target="_self"><img id="buttonf" border="0" name="buttonf" src="bilder/buttonf.png" alt="Fotografie" style="position:absolute; top:180px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttonp','bilder/buttonp-u.png');return true" onmouseup="changeImages('buttonp','bilder/buttonp-ro.png');return true" onmouseover="changeImages('buttonp','bilder/buttonp-ro.png');return true" onmouseout="changeImages('buttonp','bilder/buttonp.png');return true" href="pixel-art.html" target="_self"><img id="buttonp" border="0" name="buttonp" src="bilder/buttonp.png" alt="Pixel-Art" style="position:absolute; top:210px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttons','bilder/buttons-u.png');return true" onmouseup="changeImages('buttons','bilder/buttons-ro.png');return true" onmouseover="changeImages('buttons','bilder/buttons-ro.png');return true" onmouseout="changeImages('buttons','bilder/buttons.png');return true" href="service.html" target="_self"><img id="buttons" border="0" name="buttons" src="bilder/buttons.png" alt="Service" style="position:absolute; top:240px; left:0px"></a></p>
  <p><a onmousedown="changeImages('buttoni','bilder/buttoni-u.png');return true" onmouseup="changeImages('buttoni','bilder/buttoni-ro.png');return true" onmouseover="changeImages('buttoni','bilder/buttoni-ro.png');return true" onmouseout="changeImages('buttoni','bilder/buttoni.png');return true" href="impressum.html" target="_self"><img id="buttoni" border="0" name="buttoni" src="bilder/buttoni.png" alt="Impressum" style="position:absolute; top:270px; left:0px"></a></p>
  <input type="image" src="bilder/bleistift-u.png" alt="Bleistift" style="position:absolute; top:60px; left:160px">
  <a href="grafik-buntstift.html" target="_self"><img border="0" src="bilder/buntstift.png" alt="Buntstift" style="position:absolute; top:60px; left:290px"></a>
 
 <img onclick="show('bilder/g-flascheng.jpg')" src="bilder/g-flaschen.jpg" style="position:absolute; top:120px; left:160px"> 
 <img onclick="show('bilder/g-stilllebeng.jpg')" src="bilder/g-stillleben.jpg" style="position:absolute; top:120px; left:250px">
 <img onclick="show('bilder/g-kaktusg.jpg')" src="bilder/g-kaktus.jpg" style="position:absolute; top:210px; left:160px">
 <img onclick="show('bilder/g-portraitg.jpg')" src="bilder/g-portrait.jpg" style="position:absolute; top:210px; left:250px">
 <img onclick="show('bilder/g-lippenstiftg.jpg')" src="bilder/g-lippenstift.jpg" style="position:absolute; top:300px; left:160px">
 <img id="showpic2" src="bilder/g-flascheng.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic3" src="bilder/g-stilllebeng.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic4" src="bilder/g-kaktusg.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic5" src="bilder/g-portraitg.jpg" style="position:absolute; top:120px; left:360px">
 <img id="showpic" src="bilder/g-lippenstiftg.jpg" style="position:absolute; top:120px; left:360px">
 
 </body>
</html>

Alles anzeigen

falls du einen screenshot für einen bessere vorstellung brauchst, sag bescheid

synaptic

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

<!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>

Alles anzeigen

so wär des echt die einfachste variante auch wenn du da nochmal etwas umschreiben müsstest, aber so wird der code wesentlich schlanker

aila

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

<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">

Alles anzeigen

synaptic

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

aila

auch wenn ich nur ein bild verwende, werden das große und das kleine bild gleichzeitig angezeigt.

das problem muss irgendwie bei dem "showpic" liegen.
ich hatte nämlich erst bei den new image bildern einen schreibfehler in der url.
die bilder wurden aber trotzdem alle angezeigt, da die url bei den id="showpic" richtig war.
naja, und die IDs wurden ja automatisch nummeriert, sobald ich das dokument neu geöffnet hatte.
was also tun bei mehreren bildern??
ich werd aber auch nicht so richtig aus dem quelltext schlau. die funktion heißt ja
function show(id)
es werden aber 2 IDs definiert. einmal für die bilder direkt und dann für "showpic".
auf welche ID greift die funktion eigentlich zurück??

nachtrag:
kann es sein, dass ich bei mehreren bilder wirklich nur für ein einziges bild mit
<img id="show" src="url">
definieren muss?? da hab ich wohl deinen code erst falsch verstanden.
ich hab jetzt nämlich alle anderen IDs gelöscht und jetzt wird nur noch ein bild angezeigt. und wenn ich dann die anderen vorschaubilder anklicke, wird auch nur das jeweilige bild angezeigt, so wie ich es eigentlich auch wollte.
kann man das auch noch einstellen, dass man erst gar kein bild sieht, wenn man die seite das erste mal lädt?

und warum sollte ich abstand von position absolut nehmen. muss ich dafür mit css arbeiten?

synaptic

HTML

<!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>

Alles anzeigen

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

Tags