Oprettet søn. d. 19. september 2010 kl. 21:03:58

nemlig
nemlig (5.151 point. Point ude: 0)

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.

Skrevet man. d. 20. september 2010 kl. 00:44:36| #1

splazz
splazz (57.138 point)
majbom.com
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...

Skrevet man. d. 20. september 2010 kl. 07:52:46| #2

nemlig
nemlig (5.151 point)
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).

Skrevet man. d. 20. september 2010 kl. 17:58:38| #3

splazz
splazz (57.138 point)
majbom.com
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 :)

Skrevet tor. d. 07. oktober 2010 kl. 07:57:01| #4

webmover
webmover (3.200 point)
sixt.dk
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/ (...)

Skrevet ons. d. 10. november 2010 kl. 14:21:22| #5


Skrevet ons. d. 10. november 2010 kl. 14:35:15| #6

nemlig
nemlig (5.151 point)
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/ (...) 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>

Skrevet ons. d. 10. november 2010 kl. 18:57:59| #7

splazz
splazz (57.138 point)
majbom.com
du fandt selv løsningen, jeg springer over :)

Skrevet ons. d. 23. marts 2011 kl. 11:27:26| #8


Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

Hjælp til validering

Oprettet den 26. maj 2012 kl. 14.01
Stefan1 giver 20 point for svar | Giv et svar »

Javascript sliders?

Oprettet den 24. maj 2012 kl. 11.29
NizeGuy giver 15 point for svar | Giv et svar »

Validere navn i form

Oprettet den 22. maj 2012 kl. 15.13
13thsky giver 60 point for svar | Giv et svar »



   




Tips & Tricks fra PC World

Teaser billede

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.


Anmeldelser fra PC World

Teaser billede

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Sådan siger du farvel til Facebook

Læs her, hvordan du dropper Facebook og i stedet anvender nogle brugervenlige alternativer, så du stadig kan være social på nettet.


Nyheder fra Computerworld

Teaser billede

Galleri: De fedeste håndholdte gennem 40 år

Her har du de mest banebrydende håndholdte computere gennem alle tider.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger