Notifikationer

Markér alle som læst Log ud

Slettet bruger

01. juni 2009 - 21:11 Der er 11 kommentarer og
1 løsning

Image mouseover effekt (ny)

Tjaah jeg postede forkert så laver den her i stedet.

Hej.

Som overskriften siger er jeg i gang med en hjemmeside.
og jeg har så lavet nogle menu billeder som skal forekomme som menu links.
men hvordan gør jeg så der også kan komme en mouseover effekt på dem, ligsom man normalt tilføjer til en css baseret menu?

Tak på forhånd....

Synes godt om

ebusiness Nybegynder

01. juni 2009 - 22:20 #1

Du laver et stykke JavaScript som ændrer src attributten. Fx:

<img src="img1.png" onmouseover="this.src='img2.png'" onmouseout="this.src='img1.png'">

Synes godt om

mclemens Nybegynder

01. juni 2009 - 22:56 #2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
a.tester {text-decoration:none;display:block;background:url('http://www.eksperten.dk/images/dot_2.gif') no-repeat;width:100px;height:100px;}
a.tester:hover {background-image:url('http://www.eksperten.dk/images/dot_1.gif');}
</style>

</head><body>
<a class="tester" href="noget"> </a>
</body></html>

Synes godt om

Slettet bruger

02. juni 2009 - 19:41 #3

Hej.
jeg vil gerne benytte ebusiness version.
Men når jeg indtaster koden og linksne til mine billeder. kommder der intent frem?

<img src="images/menu-foside.png" onmouseover=this.src="images/menu-forside-over.png'" onmouseout="this.src='images/menu-forside.png'">

Håber i kan hjælpe?

Synes godt om

mclemens Nybegynder

02. juni 2009 - 19:53 #4

onmouseover=this.src="images/menu-forside-over.png'"
^ - Du har flyttet "-en og slettet '-en ...
onmouseover="this.src='images/menu-forside-over.png'"

Synes godt om

Slettet bruger

02. juni 2009 - 19:57 #5

Hmm.

Jeg har sat det ind i div'en "menu"
Men er det rigtigt sat op?

<script type="text/javascript">
<img src="images/menu-foside.png" onmouseover="this.src='images/menu-forside-over.png'" onmouseout="this.src='images/menu-forside.png'">
</script>

Synes godt om

mclemens Nybegynder

02. juni 2009 - 20:02 #6

Du skal ikke have <script type="text/javascript"> og </script>.
(on+event attributter aktiverer javascript
på events uden script blokken skal anvendes.)

Synes godt om

Slettet bruger

02. juni 2009 - 20:04 #7

Hvad skal jeg så gør?

Synes godt om

mclemens Nybegynder

02. juni 2009 - 20:09 #8

Slette <script type="text/javascript"> og </script> som nævnt og blot skrive linjen
<img src="images/menu-foside.png" onmouseover="this.src='images/menu-forside-over.png'" onmouseout="this.src='images/menu-forside.png'">

Synes godt om

Slettet bruger

02. juni 2009 - 20:14 #9

Tak :D
Kan jeg lave en class i den til en css kode så den kan komme længere ind?

Og ville det ikke være fair.
hvis jeg delte pointene mellem jer?

Synes godt om

mclemens Nybegynder

02. juni 2009 - 20:35 #10

Ja, du skriver bare class="etellerandet" i elementet:
<img src="images/menu-foside.png" onmouseover="this.src='images/menu-forside-over.png'" onmouseout="this.src='images/menu-forside.png'" class="nogetduvaelger">

og i din css fil kan du placere billedet med f.eks.:
.nogetduvaelger{
position:relative;
left:-10px;
}
eller
.nogetduvaelger{
margin-left:-10px;
}

---

Fordeling af point er op til dig, det er to forskellige
valgmuligheder, den ene er via. javascript den anden er
via. css. Jeg synes her at du bør give ebusiness pointene*.

*Du valgte ebusiness's, han lagde svar først og bør derfor have
pointene eftersom du valgte hans. (Jeg lagde et andet svar fordi jeg troede, grundet kategorien, at css løsningen var ønsket, ikke
for at få point, hvis det eksisterende svar var løsningen.)

Synes godt om

Slettet bruger

02. juni 2009 - 20:37 #11

Syntes det blev lidt for grimt, med det jeg har lavet.
såå prøver noget andet.
men vil helt klart bruge det på et idspunkt.

Synes godt om

Slettet bruger

02. juni 2009 - 20:37 #12

Hmm.
så får han dem ;)

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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