Avatar billede nemlig Professor
19. september 2010 - 21:03 Der er 7 kommentarer og
1 løsning

Specialeffekt ved mouseover image

Hejsa.
Jeg leder efter et script/vejledning til en navigationsfunktion på en forside på et site.

Forestil jer en forside, hvor der på midten af siden, vises en firkant med  2 x 2 figurer/billeder. De 4 figurer skal virke som link til nogle undersider.

Ved mouseover skal den "aktive" figur fremhæves, fx ved at den toner mere frem, mens de 3 øvrige nedtones. Samtidig skal der vises en tekstinfo i en div et andet sted på forsiden, som fortæller lidt om den "aktive" figur.

Er det mon noget jquery? Det må godt være lidt lækkert! Det skal ikke være Flash.
Avatar billede majbom Novice
20. september 2010 - 00:44 #1
det er ret nemt at lave 4 billeder der er udtonet, eller på anden måde ikke så fremtrædende, som ved mouseover bliver tydeligt. det er jo bare 2 billeder; ét udtonet og ét fremhævet og lave et script der skifter mellem de 2 ved mouseover og mouseout.

at vise tekst i en div er også ret simpelt med lidt DOM...
Avatar billede nemlig Professor
20. september 2010 - 07:52 #2
Det med billederne er jeg helt med på - jeg mener bare, at det kan gøres lidt mere lækkert med noget javascript (Læs: Overgangen med at billedet er i fokus til det ikke er, kan vist nok laves med noget animeret udtoning/zoom).
Avatar billede majbom Novice
20. september 2010 - 17:58 #3
ja okay, hvis det skal være liret, så er den "nemmeste" løsning nok noget jquery/mootools og hvad de ellers hedder...

jeg kender ikke nogle af dem desværre :)
Avatar billede webmover Nybegynder
07. oktober 2010 - 07:57 #4
Det er super nemt at lave med jquery. Den funktion de nok primært skal bruge til denne opgave er .animate() du kan læse om den her og se eksempler.

http://api.jquery.com/animate/
Avatar billede majbom Novice
10. november 2010 - 14:21 #5
nemlig?
Avatar billede nemlig Professor
10. november 2010 - 14:35 #6
Godt du kan holde mig i ørene.... :)
Denne udfordring har drillet mig en del, men jeg er kommet frem til en løsning, som godt nok ikke er 100% OK, da jeg mangler lidt udtoning, men ellers er perfekt.

Løsningen blev noget javascript, som jeg fandt på nettet.

Send et svar begge 2 og jeg fordeler pointene.

Koden kommer her, så andre evt. kan blive inspireret:

<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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('grafik/lejer.jpg','grafik/udlejer.jpg','grafik/mereinfo.jpg')" style="font-family: Verdana">

Og her er koden, som viser billederne:

<a href="http://www.url.dk/ny/index.php" target="_blank"><img src="grafik/udlejer_bw.jpg" name="alpina" width="340" height="425" border="0" id="alpina" onMouseOver="MM_swapImage('alpina','','grafik/udlejer.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
Avatar billede majbom Novice
10. november 2010 - 18:57 #7
du fandt selv løsningen, jeg springer over :)
Avatar billede nemlig Professor
23. marts 2011 - 11:27 #8
lukker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester