Rollover image

Og her er scriptet:

<?
function rollover($billede){
?>
<script>
    var myImage = '';

    var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
    var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1)


    function setTimout() {
    setTimeout("hide();",1000);
    }

    function display(event, layerName) {


    if (document.all) {
    var selectItems=document.all.tags("SELECT")
    for(i=0;i<selectItems.length;i++)
    {
        selectItems[i].style.visibility="hidden"
    }

    }

    var myElement = document.getElementById(layerName);
    // var mySearch = document.getElementById("search");
    var x, y;
    var myWidth = 400 + 10;
    var myHeight = 300 + 10;

  if (window.event) {
    x = window.event.clientX + document.documentElement.scrollLeft
                            + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop +
                            + document.body.scrollTop;
  }
  else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  x += 1; y += 1;


    myImage+='<tr><td style="padding-left: 5; padding-right: 5; padding-top: 5; padding-bottom: 5"><center><img src="<?=$billede?>" height="300" width="400"><center></td></tr>';

    var myHTML='<table width="320" cellpadding="3" cellspacing="1" border="0" onClick="java script:hide();">';
    myHTML+=myImage;
    myHTML+='</table>';

    myElement.style.left = x + "px";
    myElement.style.top = y + "px";

    myElement.style.width = myWidth;
    myElement.style.height = myHeight;
    myElement.style.background = "#FFFFFF";
    myElement.style.visibility = "visible";
    myElement.innerHTML = myHTML;
    // mySearch.style.visibility = "hidden";

    myImage = '';

    document.getElementById(layerName).onclick = hide;
    }

    function hide() {
    var myElement = document.getElementById("image");
    myElement.style.visibility = "hidden";
    //var mySearch = document.getElementById("search");
    //mySearch.style.visibility = "visible";

    if (document.all) {
    var selectItems=document.all.tags("SELECT")
    for(i=0;i<selectItems.length;i++)
    {
        selectItems[i].style.visibility="visible"
    }

    }

    }

</script>

while($row=mysql_fetch_array($result)){
echo rollover($row1[billednavn]);
?>
<img src="<?=$row[thumbnavn]?>" width=80 height=60 border=0 onMouseover="java script:display(event, 'image'); return false;" onMouseout=java script:hide(); return false;">
<div id="image" style="filter:progid:DXImageTransform.Microsoft.Shadow(color=#BDC3BD, Direction=135, Strength=3) background-color: #FFFFFF; border: 1px solid #DDDDDD; position:absolute; visibility:hidden; z-index:100"></div>
<?
}
?>

<ole>

Det script vil altid fungere sådan. Det er skrevet til at vise det samme billede. Hvis du nogensinde har set det virke på en anden måde, vil jeg gerne prøve at ryge lidt af det samme  :)

/mvh
</bole>

Du skal indbygge dine databaseopslag i funktionskaldene, ikke kaste et nyt script for hvert billede, det vil resultere i masser af gentagelser og uhensigtsmæssig kode ...

-- og i dette tilfælde, vil den sidste udgave af scripts for javascript-motoren overskrive alle tidligere udgaver, så du har sikkert det sidste i popup-tingen !-)

Olebole-> Okay du har nok ret, men er der så et andet script der vil virke?

roenving -> Ja, er godt klar over det med gentagelserne, men vidste ikke hvordan jeg ellers skulle gøre det (og selv MED gentagelser virkerde det ikke.. JEG ER HÅBLØS ;)

Så, ved i hvor der er et rollover script der kan implementeres med noget php og database ?

Kun een udgave af scriptet, hvor du lige ændrer følgende:

    function display(event, layerName) {

til

    function display(event, layerName, pic) {

-- og

    myImage+='<tr><td style="padding-left: 5; padding-right: 5; padding-top: 5; padding-bottom: 5"><center><img src="<?=$billede?>" height="300" width="400"><center></td></tr>';

til

    myImage+='<tr><td style="padding-left: 5; padding-right: 5; padding-top: 5; padding-bottom: 5"><center><img src="' + pic + '" height="300" width="400"><center></td></tr>';

-- og så sætter billede-referencen ind direkte i dine tags:

<img src="<?=$row[thumbnavn]?>" width=80 height=60 border=0 onMouseover="display(event, 'image', "<?=$row1["billednavn"];?>"); return false;" onMouseout=hide(); return false;">

-- du skal selvfølgelig være opmærksom på, at du synkroniserer thumb- og billed-navn !-)

Tak for hjælpen. Læg et svar!

Velbekomme '-)

-- og tak for point;~}