Ophelia: lightbox und mouseover-effect kommen sich in die quere

SELF-Forum

lightbox und mouseover-effect kommen sich in die quere

Ophelia Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe folgendes Problem und weiß mir nicht zu helfen, da ich mit Java nich sonderlich firm bin.

Ich habe auf meiner Seite die Lightbox2 eingebunden und in meiner Navigation mouseover-effekte über die buttons gelegt. Klappt soweit alles, nur, dass wenn ich Bilder mit Lightbox verwende, diese in die Navigationsleiste rutschen.
Ich hab schon etwas gelesen, dass sich bei Javascripts Variablen in die Quere kommen können. Nur wie vermeidet man das?

Wäre sehr dankbar für Hilfe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <title>OPHELIA ARTS</title>  
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  <link href="style.css" rel="stylesheet" type="text/css" />  
        <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  
  <script type="text/javascript" src="js/prototype.js"></script>  
  <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>  
  <script type="text/javascript" src="js/lightbox.js"></script>  
  
  
        <script type="text/javascript">  
  
  Highlight1     = new Image();  
        Highlight1.src = "img_reloaded/buttons/home-aktiv.png";  
  Normal1        = new Image();  
  Normal1.src    = "img_reloaded/buttons/home.png";  
  
        Highlight2     = new Image();  
        Highlight2.src = "img_reloaded/buttons/about-aktiv.png";  
  Normal2        = new Image();  
  Normal2.src    = "img_reloaded/buttons/about.png";  
  
  Highlight3     = new Image();  
        Highlight3.src = "img_reloaded/buttons/makeup-aktiv.png";  
  Normal3        = new Image();  
  Normal3.src    = "img_reloaded/buttons/makeup.png";  
  
  Highlight4     = new Image();  
        Highlight4.src = "img_reloaded/buttons/contact-aktiv.png";  
  Normal4        = new Image();  
  Normal4.src    = "img_reloaded/buttons/contact.png";  
  
  function Bildwechsel (Bildnr, Bildobjekt) {  
    window.document.images[Bildnr].src = Bildobjekt.src;  
        }  
        </script>  
        </head>  
  
<body>  
  
<div id="content">  
    <div id="header"></div>  
  
    <div id="content_text">  
      <h1>Make Up</h1>  
      <br />  
      <br />  
      <h3>Hier sehen Sie eine Auswahl an Bildern aus meiner bisher geleisteten Arbeit als Visagistin.<br />         Die Shootings sind in Zusammenarbeit mit verschiedenen Fotographen entstanden, die entweder von      meiner Seite aus oder in Gemeinschaft organisiert wurden.</h3><br />  
      <br />  
      Zum Öffnen der Bilder bitte einfach auf die kleine Vorschau klicken.<br />  
      Zum Schließen entweder auf "close" oder neben das Bild in den grauen Schatten klicken.    </div>  
      <a href="img_reloaded/Gallerie/patricia1.jpg" rel="lightbox[Patricia]"><img src=  
      "img_reloaded/Gallerie/patricia1-thumb.jpg"/></a>  
      <a href="img_reloaded/Gallerie/patricia2.jpg" rel="lightbox[Patricia]"><img src=  
      "img_reloaded/Gallerie/patricia2-thumb.jpg"/></a>  
      <a href="img_reloaded/Gallerie/patricia3.jpg" rel="lightbox[Patricia]"><img src=  
      "img_reloaded/Gallerie/patricia3-thumb.jpg"/></a>  
  
        <div id="nav">  
  
          <a href="home.htm"  
              onmouseover="Bildwechsel(0, Highlight1)"  
                onmouseout="Bildwechsel(0, Normal1)"><img src="img_reloaded/buttons/home.png"  
                alt="Home"/></a>  
  
    <a href="about.htm"  
              onmouseover="Bildwechsel(1, Highlight2)"  
                onmouseout="Bildwechsel(1, Normal2)"><img src="img_reloaded/buttons/about.png"  
                alt="About"/></a>  
  
          <a href="makeup.htm"  
              onmouseover="Bildwechsel(2, Highlight3)"  
                onmouseout="Bildwechsel(2, Normal3)"><img src="img_reloaded/buttons/makeup.png"  
                alt="Make Up"/></a>  
  
          <a href="contact.htm"  
              onmouseover="Bildwechsel(3, Highlight4)"  
                onmouseout="Bildwechsel(3, Normal4)"><img src="img_reloaded/buttons/contact.png"  
                alt="Contact"/></a>        </div>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln