Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: showhide layers

  1. #1
    Teeny
    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard showhide layers

    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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: showhide layers

    ohne das javascript, das dahinterliegt bringt dein posting nix.. hier kann niemand hellsehen..
    habs auch mal in den richtigen bereich verschoben
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: showhide layers

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

    <script type="text/javascript">
    <!--
    function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.visibility == 'visible'){obj[id].style.visibility = 'hidden';}
    else {obj[id].style.visibility = 'visible';}
    }
    //-->
    </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.

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: showhide layers

    ja is doch einfach
    HTML-Code:
    <!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>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: showhide layers

    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">
    <!--
    #layer1 { visibility: hidden; position: absolute; top: 116px; left: 406px; width: 100%; height: 100% }
    --></style>

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: showhide layers

    also probier es mal so is ungetestet

    Code:
    <!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>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: showhide layers

    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/..." ...>
    Geändert von aila (04.05.2009 um 16:05 Uhr)

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: showhide layers

    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: http://www.forum-hilfe.de/showthread.php?t=42197
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: showhide layers

    Code:
    <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="file:///C:/.../Adobe/Adobe%20GoLive/...b.js"></script>
      </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>
    falls du einen screenshot für einen bessere vorstellung brauchst, sag bescheid
    Geändert von aila (04.05.2009 um 17:12 Uhr)

  10. #10
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: showhide layers

    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
    Code:
    <!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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Layers über Frames anzeigen
    Von RedFighter im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 16.07.2008, 00:15
  2. loadmovie in verschiedene layers
    Von dark_angel im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 01.04.2006, 14:30
  3. DIV Layers
    Von redm2006 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.07.2005, 15:48
  4. Grafik innerhalb eines CSS-Layers positionieren
    Von rothom im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 27.05.2004, 12:53

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •