Html: Ny bild när man drar musen över den.

2011-01-02 20:38

Medlem

Registrerad: Okt 2009

●

Html: Ny bild när man drar musen över den.

Hej. Jag undrar vad det är för kod i html när det först är en bild t.ex en knapp, sen när man drar musen över den så ska det bli t.ex samma knapp fast tryckt.

Visa signatur

Intel I7 4770K @ Stock Hyper 212 Evo | 16 Gb ram 2400 Mhz | SSD: Samsung 850 Evo 500 Gb | Asus GTX 980 Strix

Rapportera Redigera

Citera flera Citera

2011-01-02 21:24

Permalänk

PawPaw

Medlem

Plats: Helsingborg
Registrerad: Aug 2010

●

Det gör du genom att använda funktionen rollover och 2 bilder. En bild där knappen ser normal ut och en knapp där knappen ser likadan ut fast nertryck som du säger.

Ibland använder jag ett javascript till det, men då måste besökaren ha javascript aktiverat.

<script type="text/javascript"> 
 
    if (document.images) {
      button1 = new Image
      button2 = new Image
 
      button1.src = 'img/vanlig.png'
      button2.src = 'img/nertryckt.png'

}
  </script>

Placera koden ovanför innanför <head></head>

Sedan placera koden nedanför innanför <body></body>

<a href="önskad.html" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="vanlig.png" style="border:none" name="rollover" alt=""/></a>

Det finns flera olika sätt att göra det på, om du har Dreamweaver är det bara att gå in på Insert>Images>Rollover har jag för mig och därifrån kan du också fixa det, har bara för mig att det blir väldigt mycket kod. Och där inkluderas också javascript.

Glömt inte heller och "preload" den knapp som är nertryckt!

Lycka till!

Mvh

Fredde

Visa signatur

www.fredrikweb.se

Rapportera Redigera

Citera flera Citera

2011-01-02 21:52

Permalänk

linsjb

Medlem ★

Plats: Sundsvall
Registrerad: Feb 2008

●

Eller css om du använder det!
Dock är css att föredra, går att göra väldigt mycket med css.
Den här guiden visar bra hur man gör för att ha rollover effekt, det är även bara en bild som används.

http://www.mattvarone.com/web-design/css-text-based-navigatio...

Visa signatur

Flickr

Rapportera Redigera

Citera flera Citera

2011-01-02 21:56

Permalänk

PawPaw

Medlem

Plats: Helsingborg
Registrerad: Aug 2010

●

Skrivet av xion_drifter:

Eller css om du använder det!
Dock är css att föredra, går att göra väldigt mycket med css.
Den här guiden visar bra hur man gör för att ha rollover effekt, det är även bara en bild som används.

http://www.mattvarone.com/web-design/css-text-based-navigatio...

Gå till inlägget

+ 1! Kör på CSS istället.

Mitt alternativ funkar också men som sagt CSS är att föredra.

Visa signatur

www.fredrikweb.se

Rapportera Redigera

Citera flera Citera

Html: Ny bild när man drar musen över den.

Html: Ny bild när man drar musen över den.

Externa nyheter

Spelnyheter från FZ