Permalänk
Medlem

Onmouseover

tjena! Någon vänlig själ som kan hjälpa mig?
Jag vill placera en bild, samtidigt som den är onmouseover och att den blir större. Samt att den blir mindre igen när man gör onmouseout.
Får inte rätt med de :/

Tack på förhand!

Permalänk
Hedersmedlem

Du får nog visa lite kod och hur du försökt nu för att man ska kunna hjälpa.

Permalänk
Medlem

Här är min startsida

<!DOCTYPE html> <html> <head> <title> </title> <meta> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body style="background-image: url('bild'); background-repeat: no- repeat;"> <marquee behavior="scroll" direction="down"> <img src="bild.png" width="100" height="100" alt=""></marquee> <div width="700px" height="500px" style="margin-top:100px; margin:0 auto;"> <a href="Hemsida.html"><img src="head.png" style="position:relative; left:345px; top:-205px; border-style:none;" alt=""></a> </div> <ul id="navlist" style="position:relative; left:295px;top:-226px;"> <li> <a href="Information.html" id="Information"></a> </li> <li> <a href="Produkter.html" id="Produkter"></a> </li> <li> <a href="Kontakt.html" id="Kontakt"></a> </li> </ul> <img src="kurt.png" width="200" height="100" onmouseover="this.height=120;this.width=255;" onmouseout="this.height=100;this.width=200"> </body> </html>

La till code-taggar
Permalänk
Medlem
Skrivet av Smeneh:

tjena! Någon vänlig själ som kan hjälpa mig?
Jag vill placera en bild, samtidigt som den är onmouseover och att den blir större. Samt att den blir mindre igen när man gör onmouseout.
Får inte rätt med de :/

Tack på förhand!

HTML:

<img src="#" class="imgExpand" />

CSS:

.imgExpand { margin: 2px; width: 100px; height: 100px; padding: 5px; border: 1px solid #000; } .imgExpand:hover { width: 150px; height: 150px; }

Slängde bara ihop det lite snabbt!
Du kan också lägga till transistion på css. Gör att det ser animerat ut.

transition: <element> <tid> <delay>;
OBS! delay är inte nödvändigt.
transition: height 1s, width 1s; <-- utan delay
transition: height 1s 2s, width 1s 2s; <--- med 2 sekunders delay.

.imgExpand { margin: 2px; width: 100px; height: 100px; padding: 5px; border: 1px solid #000; transition: height 1s 2s, width 1s 2s; } .imgExpand:hover { width: 150px; height: 150px; }

edit: Mitt exempel använder sig av CSS och inte Javascript. Om du bara ska äändra utseendet, eg. Göra bilden större. Så tycker jag du ska köra på CSS.
Om du däremot ska anropa någon metod så ska du använda Javascript.

Visa signatur

~. Citera så jag hittar tillbaka .~

Permalänk
Medlem

Är inget vidare på detta, du har inte lust att plantera in dom i det jag skrev som svar innan? Kanske lättare att förstå, eller förklara lite mer detaljerat. Hoppas jag inte är dryg :*

Permalänk
Hedersmedlem

Ändrade ditt inlägg så koden var i code-taggar för att göra det mer läsbart.

MVH
Moderator Shimonu

Permalänk
Medlem
Skrivet av Smeneh:

Är inget vidare på detta, du har inte lust att plantera in dom i det jag skrev som svar innan? Kanske lättare att förstå, eller förklara lite mer detaljerat. Hoppas jag inte är dryg :*

<img src="kurt.png" class="imgExpand" /> ska du ändra html-koden till.

I din .css fil skriver du till:

.imgExpand { margin: 2px; width: 100px; height: 100px; padding: 5px; border: 1px solid #000; } .imgExpand:hover { width: 150px; height: 150px; }

Permalänk
Medlem
Skrivet av Smeneh:

tjena! Någon vänlig själ som kan hjälpa mig?
Jag vill placera en bild, samtidigt som den är onmouseover och att den blir större. Samt att den blir mindre igen när man gör onmouseout.
Får inte rätt med de :/

Tack på förhand!

Jag rekommenderar att du kör jQuery, men här kommer en variant utan css-klasser eller jQuery. Endast påverkan på width och height med javascript.
http://jsfiddle.net/NJHZk/

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk
Permalänk
Medlem

Ändra

this.height=120;this.width=255;

till

this.style.height=120;this.style.width=255;

Visa signatur

Citera för svar