Byta bild med mouseover till större bild utan att sidans layout ändras går det?!

9 svar · 717 visningar · startad av nigge 15 feb. 2012

niggeMedlem sedan feb. 2002199 inlägg

Frågan15 feb. 2012 14:46#1

Tjena!

Jag använder en väldigt simpel kod för att få min mouseover effect att fungera

<script type="text/javascript">
        image1=new Image
        image1.src="file:///C|/Users/Anders/Downloads/Test/Övning/1/Image1.png"
        image2=new Image
        image2.src="file:///C|/Users/Anders/Downloads/Test/Övning/1/Image2.png"

</script>

<div class="photo">
<a href="location1.htm" onMouseOver="document.picture.src=image2.src" onMouseOut="document.picture.src=image1.src" >
    <img name="picture" src="file:///C|/Users/Anders/Downloads/Test/Övning/1/Image1.png" alt="Annonsbild" />
</a>
 
</div>

Problemet är att image2-bilden är lite "högre" än image1... Det jag vill göra är att image2 "täcker" över informationen som är längre ner på sidan. Alltså jag vill undvika att sidan "pressas ned" är detta möjligt med ett simpelt javascript?

/Niklas

JojoxxMedlem sedan juni 20004 308 inlägg

15 feb. 2012 14:57#2

Fulhack om bild 2 alltid är större:

<div class="photo">
<a href="location1.htm">
<div id="pic1" style="position:absolute;visibility:hidden;"><img src="http://technode.com/wp-content/uploads/2011/11/big-and-small.jpg" alt="Annonsbild" onmouseout="document.getElementById('pic1').style.visibility='hidden';" /></div>
<img 
	src="http://technode.com/wp-content/uploads/2011/11/big-and-small.jpg"
	width="50"
	alt="Annonsbild"
	onmouseover="document.getElementById('pic1').style.visibility='visible';" />
</a>
</div>

Exemplet använder samma bild 2 ggr fast den ena är nerskalad. Den bilden som ligger först i koden är alltså den större. Första delen av ditt gamla script kan du ha kvar för preload.

niggeMedlem sedan feb. 2002199 inlägg

15 feb. 2012 14:59#3

Nånting blev galet, jag ser bara din fina hund(vilken verkar göra exakt det jag vill) men ser ingen kod:-p haha

För mig är det två olika bilder, en som är större än den andra. och så kommer det alltid vara. Så jag MÅSTE ha två olika bilder, men den andra är alltid större.

Prova att skriva din kod igen tack;)

voigtann1Medlem sedan juni 20019 519 inlägg

15 feb. 2012 15:11#4

Det sätter du i jojoxx kod bilden inne i diven #pic1 har den stora bilden.

niggeMedlem sedan feb. 2002199 inlägg

15 feb. 2012 15:14#5

Hej!

Lyckades få fram din kod... det var firefox som tolkade den som ett javascript;)

Problemet med den där var att det var samma bild 2 ggr som du skrev...
Det lyckades jag ändra, dock så uppstår ett problem. Jag vill att den ska byta tillbaka till den mindre bilden när jag drar bort musen.
Sedan så uppstod ett problem att den där bilden la sig bakom resten av sidan, går det att få den överst?

voigtann1Medlem sedan juni 20019 519 inlägg

15 feb. 2012 15:22#6

nigge skrev:

Det lyckades jag ändra, dock så uppstår ett problem. Jag vill att den ska byta tillbaka till den mindre bilden när jag drar bort musen.

Det gör den ju redan, se mouseout eventet

Sedan så uppstod ett problem att den där bilden la sig bakom resten av sidan, går det att få den överst?

Var placera du i ditt html dokument?

niggeMedlem sedan feb. 2002199 inlägg

15 feb. 2012 15:28#7

Sorry, den ändrar tillbaka fint... det var bara jag som hade gjort en liten tabbe:-p
Men den hamnar fortfarande bakom bilden som kommer nedanför på sidan...

Den är placerad "mitt i" dokumentet. om det var svar på din fråga voigtann1;-)

voigtann1Medlem sedan juni 20019 519 inlägg

15 feb. 2012 15:32#8

har du en positionering på de andra bilden/innehållet med ett z-index? svårt att säga vad som är fel utan någon info. Kan bara utgå ifrån det du har postat och kan tyvärr inte återskapa det: http://jsbin.com/icutiv/edit#javascript,html,live

niggeMedlem sedan feb. 2002199 inlägg

15 feb. 2012 15:43#9

Jag har dessvärre ingen positionering med ett z-index så vitt som jag ser:-(

Jag förstår att det är väldigt svårt...
Det är en bild under den förstorade som hamnar ovanpå, texten hamnar bakom som det ska...

niggeMedlem sedan feb. 2002199 inlägg

15 feb. 2012 16:23#10

Hej igen!

Problemet löste sig med en z-index! Tack för det alla som hjälpt!