Gå til innhold

onMouseover på bilder

zZzZz

Av zZzZz
i Programmering og webutvikling

Anbefalte innlegg

zZzZz

zZzZz

Skrevet
Skrevet

På siden til bandet mitt, har jeg putta inn en JavaScript-sak som jeg fant i et PCPro-blad. Denne gjør slik at når musa blir flytta over et bilde, så blir dette bildet bytta ut med et annet. Den funker forsåvidt greit i alle nettleserne jeg har prøvd den i (IE, Mozilla, Konqueror), untatt i Opera for Windows. Det snåle er at det bare er for Windows-versjonen. I Linux-Operaen funker den feilfritt.

Koden som ligger i <head>-en, ser slik ut:

<script language="JavaScript" type="text/javascript">

<!--

function findObj(n, d) { //v4.01

 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);

 if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function nbGroup(event, grpName) { //v6.0

var i,img,nbArr,args=nbGroup.arguments;

 if (event == "init" && args.length > 2) {

   if ((img = findObj(args[2])) != null && !img.init) {

     img.init = true; img.up = args[3]; img.dn = img.src;

     if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

     nbArr[nbArr.length] = img;

     for (i=4; i < args.length-1; i+=2) if ((img = findObj(args[i])) != null) {

       if (!img.up) img.up = img.src;

       img.src = img.dn = args[i+1];

       nbArr[nbArr.length] = img;

   } }

 } else if (event == "over") {

   document.nbOver = nbArr = new Array();

   for (i=1; i < args.length-1; i+=3) if ((img = findObj(args[i])) != null) {

     if (!img.up) img.up = img.src;

     img.src = (img.dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.up);

     nbArr[nbArr.length] = img;

   }

 } else if (event == "out" ) {

   for (i=0; i < document.nbOver.length; i++) { img = document.nbOver[i]; img.src = (img.dn) ? img.dn : img.up; }

 } else if (event == "down") {

   nbArr = document[grpName];

   if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.up; img.dn = 0; }

   document[grpName] = nbArr = new Array();

   for (i=2; i < args.length-1; i+=2) if ((img = findObj(args[i])) != null) {

     if (!img.up) img.up = img.src;

     img.src = img.dn = (args[i+1])? args[i+1] : img.up;

     nbArr[nbArr.length] = img;

 } }

}



function preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.p) d.p=new Array();

  var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)

  if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}

}



//-->

</script>

Og den som omslutter det spesifikke bildet ser slik ut:

<a href="/gig/home.html" target="_parent" onMouseOut="nbGroup('out');" onMouseOver="nbGroup('over','home','/gig/meny/home2.GIF','/gig/meny/home.GIF',1);" onClick="nbGroup('down','navbar1','home','/gig/meny/home.GIF',1);">

<img name="home" src="/gig/meny/home.GIF" border="0" alt="home">

</a>

Har hørt rykter om at Dreamweaver har en grei slik funksjon, men jeg har ikke DW... Noen som kunne ha putta ut koden til det?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
mikk-

mikk-

Skrevet
Skrevet

Kjapt med DW:

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_preloadImages() { //v3.0

 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

 if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>



<body onLoad="MM_preloadImages('bilde2.jpg')">

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','bilde2.jpg',1)"><img src="bilde1.jpg" name="Image2"></a>

</body>

</html>

Lenke til kommentar
dms

dms

Skrevet
Skrevet

Siden din funker fint i Opera 7.20 her, men uansett kunne dette gjøres med css:


#meny1{

background:url(opprinnelig_bilde.gif);

width:50px;

height:50px;

display:block;

}

#meny1:hover{

background:url(hover_bilde.gif);

}

Linkene blir da slik: <a href="blabla.html" id="meny1"></a>, altså uten noe mellom <a> og </a>. Man må lage egne sett for hver link (#meny1, #meny2, #meny3 osv...) og om man ønsker linkene ved siden av hverandre må de presenteres i en tabell ettersom de ellers vil plasseres under hverandre. Det er dette jeg har brukt selv på hjemmesiden min.

Lenke til kommentar
zZzZz

zZzZz

Skrevet
  • Forfatter
Skrevet
Siden din funker fint i Opera 7.20 her, men uansett kunne dette gjøres med css:


#meny1{

background:url(opprinnelig_bilde.gif);

width:50px;

height:50px;

display:block;

}

#meny1:hover{

background:url(hover_bilde.gif);

}

Linkene blir da slik: <a href="blabla.html" id="meny1"></a>, altså uten noe mellom <a> og </a>. Man må lage egne sett for hver link (#meny1, #meny2, #meny3 osv...) og om man ønsker linkene ved siden av hverandre må de presenteres i en tabell ettersom de ellers vil plasseres under hverandre. Det er dette jeg har brukt selv på hjemmesiden min.

Denne greia funka i Opera 7.11 for Windows - delvis ihvertfall. i IE/Mozilla/Opera for Linux ser dere at når man holder musa over en av hovednavigasjonsknappene, kommer det en slags fade fra hvitt til rødt. Denne er en gif-animasjon, men Windows-Operaen ville ikke kjøre gif-animasjon i den linken...
Lenke til kommentar
dms

dms

Skrevet
Skrevet

Mkay, so I see. Da kan jeg dessverre ikke hjelpe deg med problemet direkte ettersom javascript ikke er min greie, men jeg har et annet forslag nemlig å droppe fade-funksjonen. Den er ikke veldig fin å se på, og trekker egentlig ned helhetsinntrykket uansett. My humble opinion only :wink:

Hvis du allikevel skal ha en slik funksjon finner du sikkert 14'234'853 lignende scripts på www.hotscripts.com

Lenke til kommentar
zZzZz

zZzZz

Skrevet
  • Forfatter
Skrevet
Mkay, so I see. Da kan jeg dessverre ikke hjelpe deg med problemet direkte ettersom javascript ikke er min greie, men jeg har et annet forslag nemlig å droppe fade-funksjonen. Den er ikke veldig fin å se på, og trekker egentlig ned helhetsinntrykket uansett. My humble opinion only :wink:

Hvis du allikevel skal ha en slik funksjon finner du sikkert 14'234'853 lignende scripts på www.hotscripts.com

Egentlig, så er det ikke så fryktelig nøye, dette her, for vi skal kjøpe oss *skikkelig* domene, og med det, lager vi ny design, der vi har bestemt at vi ikke tar noen fade-greier, bare rett fra den ene til den andre fargen, kan du si.

Men jeg kan ikke si meg helt enig i at faden er stygg.. :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...