CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

mydream Nybegynder

25. oktober 2012 - 10:18 Der er 13 kommentarer

Mouseover effekt på billeder samtidig med skift af Z-index

Jeg har 2 billeder, der overlapper hinanden.

Når man kører musen over det ene, skal billedet skifte og hele divtagget flyttes frem forrest.

Jeg har forsøgt med dette, som ikke virker:

<div style="left:100px; top:100px; position:relative;">
<img title="Sleswig Holstein" src="/include/grafik/kort/slesvig-grey.jpg" width="256" height="250" onmouseover="this.src='/include/grafik/kort/slesvig-rod.jpg'; this.style.z-index=100;" onmouseout="this.src='/include/grafik/kort/slesvig-grey.jpg'">
</div>
<div style="left:215px; top:29px; position:relative;"><img title="Hamburg" src="include/grafik/kort/hamburg-hvid.jpg" width="63" height="57" onmouseover="this.src='/include/grafik/kort/hamburg-farvet.jpg'; this.style.z-index=100;" onmouseout="this.src='/include/grafik/kort/hamburg-hvid.jpg'"></div>

Dvs. at jeg gerne vil have det billede jeg kører henover til at skifte til et andet billede der med farve er markeret, og samtidig flytte billedet helt frem.

Nogle ideer? Er jeg tæt på eller langt fra?

Synes godt om

scootergrisen Nybegynder

25. oktober 2012 - 14:41 #1

Det er lettere at hjælpe hvis du kommer med et link hvor vi kan teste det.

Synes godt om

olebole Juniormester

25. oktober 2012 - 14:54 #2

<ole>

Ja, det vil ikke virke på dén måde. Luk lige dine gamle tråde, så finder vi ud af en løsning =)

/mvh
</bole>

Synes godt om

Slettet bruger

25. oktober 2012 - 23:58 #3

Når du har lukket dine gamle tråde, kan du prøve:

Synes godt om

olebole Juniormester

26. oktober 2012 - 00:34 #4

Det er overordentlig sjældent (læs: aldrig) hensigtsmæssigt at bruge top, right, bottom eller left på et relativt positioneret element.

Synes godt om

Slettet bruger

26. oktober 2012 - 01:44 #5

Hvorfor ikke, det er da netop det relative er beregnet til.
- og de var der i forvejen : )

Synes godt om

mydream Nybegynder

26. oktober 2012 - 12:00 #6

T4NK32 vil du lægge et svar?

Jeg kan godt se at jeg har mange point ude - Må vist hellere se at få kigget det igennem :)

Synes godt om

olebole Juniormester

26. oktober 2012 - 15:05 #7

"Hvorfor ikke, det er da netop det relative er beregnet til." >> Nej, det giver problemer, som fylder en stor del af databasen på Eksperten - og de fleste andre udviklerfora

Man kan ikke flytte på et relativt positioneret element med top, right, bottom og left. Elementet bliver liggende på sin gamle plads. Det er kun den genererede boks, der flyttes, hvilket betyder, at det både optager sin gamle og sin nye plads.

Det er næsten altid uhensigtsmæssigt, og ellers bliver det uhensigtsmæssigt næste gang, der skal laves en ændring i koden. Derfor fraråde alle erfarne udviklere da også præcis dén fremgangsmåde.

"- og de var der i forvejen" >> Mere meningsløst argument bliver det svært at digte, når der er tale om et spørgsmål i et hjælpeforum. Meningen er jo at få en god/bedre løsning *o)

Den gode løsning er at bruge et relativt positioneret element med absolute positionerede elementer i. Så placerer det relative element sig i forhold til sidens naturlige flow. De absolut positionerede kan herefter placeres i forhold til det relative med top, right, bottom og left

Synes godt om

Slettet bruger

26. oktober 2012 - 16:31 #8

Ja, relativt positionerede elementer er ofte en nødløsning på problemer som burde takles med mere fundamentale design-ændringer..

I retrospekt skulle jeg nok have svaret lidt mere uddybende, for der var faktisk 4 problemer:

Javascript-navnet for "z-index" er "zIndex" (ellers ville - betyde minus)

z-index blev sat til 100 ved mouseover begge, aldrig sat ned igen.

De to billeder lå i hver sin div, hvorfor det ikke ville nytte at ændre deres egne z-index - skulle i givet fald have været:
onmouseover="this.parentElement.style.zIndex=100" altså div'ens.

Og endelig var billederne positioneret static (hverken relative, absolute eller fixed) hvorfor man slet ikke KUNNE ændre deres z-index.

Personligt forsøger jeg altid at holde antallet af elementer nede.
- i dette tilfælde indeholdt div'erne ikke andet end billederne, derfor smed jeg dem væk.

Synes godt om

olebole Juniormester

26. oktober 2012 - 16:53 #9

Ja, der var masser af fejl. Der mangler også en alt-attribut på billederne. Med mindre, der skulle være 'luft' mellem bunden af DIV'ene og billederne (og det skulle der jo nok ikke), burde billederne have fået display:block.

"Personligt forsøger jeg altid at holde antallet af elementer nede.
- i dette tilfælde indeholdt div'erne ikke andet end billederne, derfor smed jeg dem væk."

Så sandt, så sandt ... men siden indeholder formodentlig andre elementer =)

Synes godt om

olebole Juniormester

26. oktober 2012 - 17:09 #10

Personligt ville jeg nok gøre noget i stil med:

Bortset fra, at jeg ville lægge CSS'en ind i et stylesheet

Synes godt om

Slettet bruger

26. oktober 2012 - 17:44 #11

Jeg ville foretrække en ekstra parameter på swapImg, fremfor den globale elmActiveImg.

function swapImg(elmImg, sImgName, mOver)
{
elmImg.setAttribute("src", sImgPath+sImgName)
if (mOver)
elmImg.style.zIndex = 1
else
elmImg.style.zIndex = 0
}
..
onmouseover="swap(,,true)
onmouseover="swap(,,false)

Synes godt om

olebole Juniormester

26. oktober 2012 - 18:19 #12

Der er nogle helt andre og langt mere interessante problemstillinger i dette spørgsmål:

*) Hvorfor ligger der en handler på begge billeder?

*) Er det mon meningen, man skal kunne lave mouseover på det lille billede, som ligger foran det store?

*) Hvis det er tilfældet, hvordan skal det så kunne lade sig gøre, når mouseover på det store (bageste) billede, flytter dette frem foran det lille?

Jeg forstår vist ikke de grundlæggende præmisser i opgaven

Synes godt om

Slettet bruger

26. oktober 2012 - 18:43 #13

: )
Det har jeg også spekuleret over. Gad godt at se det "i virkeligheden"

- Må vi bede om et link, mydream ?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS