Forum Mjukvara Programmering och digitalt skapande Tråd

Onmouseover

1
Skriv svar
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!

Redigera
Citera flera Citera
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.

Redigera
Citera flera Citera
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
Redigera
Citera flera Citera
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!

Gå till inlägget

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 .~

Redigera
Citera flera Citera
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 :*

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
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 :*

Gå till inlägget

<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;
}
Redigera
Citera flera Citera
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!

Gå till inlägget

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

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

<a href="http://www.länkexempel.se/"><img src="http://www.exempel.se/images/bild1.png/" onmouseover="this.src=''<img src="http://www.exempel.se/images/bild2.png/'" onmouseout="this.src="<img src="http://www.exempel.se/images/bild1.png/'"></a>

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara