Søg
Avatar billede hansgeist Nybegynder
19. august 2003 - 10:23 Der er 14 kommentarer og
1 løsning

Skift "bullet image" på <li> tag on mouse over

Hej hvordan skifter jeg bulletimage i en liste on mouse over?

<style>???
<script>???

<div>
<ul>
<li> <a href="#">link1</a> </li>
<li> <a href="#">link2</a> </li>
<li> <a href="#">link3</a> </li>
<li> <a href="#">link3</a> </li>
</ul>
</div>
Avatar billede dta Nybegynder
19. august 2003 - 11:33 #1
UL { list-style-image: url("BILLEDE") }
Avatar billede dta Nybegynder
19. august 2003 - 11:34 #2
<STYLE type="text/css">
      UL { list-style-image: url("BILLEDE") }
</STYLE>
Avatar billede dta Nybegynder
19. august 2003 - 11:42 #3
Jeg så ikke on mouse over, men her er det.

<Head>
<STYLE type="text/css">
      UL a { list-style-image: url("Billede1") }
      UL a:hover { list-style-image: url("billed2") }
</STYLE>
</head>
<body>
<div>
<ul>
<a href="#"><li> link1 </li></a>
<a href="#"><li> link2 </li></a>
<a href="#"><li> link3 </li></a>
<a href="#"><li> link3 </li></a>
</ul>
</div>
</body>
Avatar billede mm12010 Nybegynder
19. august 2003 - 11:48 #4
onMouseOver="this.style.listStyleImage='url(graphics/bullet.gif)';"
Avatar billede hansgeist Nybegynder
19. august 2003 - 12:02 #5
Tak for svar. Jeg har lige været optaget af noget andet, men jeg vil æde min hat på at alle listens billeder ændrer sig hvis jeg gør ovenstående. Jeg har dog ikke prøvet det af. Det vil jeg lige gøre, men tror du ikke at jeg har ret i mine bange anelser?
Avatar billede hansgeist Nybegynder
19. august 2003 - 12:08 #6
til mme12010

Jeg har ikke helt forstået dit svar. Kan jeg gøre dette for foreksempel at have en blå firkant til at skifet til en rød pil on mouse over? Og skifte tilbage til blå firkant når musen flyttes væk igen. Ja. Det er egentlig bare hoover effekten jeg vil have på mine bullet images i listen.

<STYLE type="text/css">
      li { list-style-image: url("blåfirkant") }
</STYLE>

<div>
<ul>
<li> <a href="#" onMouseOver="this.style.listStyleImage='url(graphics/rødpil.gif)';">link1</a> </li>
<li> <a href="#" onMouseOver="this.style.listStyleImage='url(graphics/rødpil.gif)';">link2</a> </li>
<li> <a href="#" onMouseOver="this.style.listStyleImage='url(graphics/rødpil.gif)';">link3</a> </li>
<li> <a href="#" onMouseOver="this.style.listStyleImage='url(graphics/rødpil.gif)';">link3</a> </li>
</ul>
</div>
Avatar billede mm12010 Nybegynder
19. august 2003 - 12:10 #7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>389396</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function listeStyle(li,o){
    liste = document.getElementById(li);
    if(o=="over"){
        liste.style.listStyle='url(gfx/tridown.gif)';
        }
    else if(o=="out"){
        liste.style.listStyle='url(gfx/arrow.gif)';
        }
    }
//-->
</script>
</head>
<body>
<div>
<ul>
<li id="list0" style="list-style-image: url(gfx/arrow.gif)" onMouseOver="listeStyle('list0','over')" onMouseOut="listeStyle('list0','out')"><a href="#" onMouseOver="listeStyle('list0','over')" onMouseOut="listeStyle('list0','out')">link0</a></li>
<li id="list1" style="list-style-image: url(gfx/arrow.gif)" onMouseOver="this.style.listStyleImage='url(gfx/tridown.gif)'" onMouseOut="this.style.listStyleImage='url(gfx/arrow.gif)'"><a href="#" onMouseOver="document.getElementById('list1').style.listStyleImage='url(gfx/tridown.gif)'" onMouseOut="document.getElementById('list1').style.listStyleImage='url(gfx/arrow.gif)'">link1</a></li>
<li id="list3" style="list-style-image: url(gfx/arrow.gif)"><a href="#" onMouseOver="listeStyle('list3','over')" onMouseOut="listeStyle('list3','out')">link3</a></li>
<li id="list4" style="list-style-image: url(gfx/arrow.gif)"><a href="#" onMouseOver="document.getElementById('list4').style.listStyleImage='url(gfx/tridown.gif)'" onMouseOut="document.getElementById('list4').style.listStyleImage='url(gfx/arrow.gif)'">link4</a></li>
</ul>
</div>
</body>
</html>
Avatar billede hansgeist Nybegynder
19. august 2003 - 12:25 #8
Ok mm12010. Jeg prøver det lige. Øjeblik
Avatar billede dta Nybegynder
19. august 2003 - 12:32 #9
Du skal gøre op med dig selv om du vil bruge javaScript eller ren CSS. Ovenstående kilde som jeg har pastet ind du skal erstatte Billed1 og Billed2 med stier til din grafik. E.g.

<STYLE type="text/css">
      UL a { list-style-image: url("/blaafirkant.gif") }
      UL a:hover { list-style-image: url("/rodfirkant.gif") }
</STYLE>
Forklaringen på hvad der sker er at A ændre tilstand fra a- > a;hover når du køre musen over, og så ændre style sig på image. Prøv bare med ovenstående kode i en ny htmlfil og se effekten.
Avatar billede hansgeist Nybegynder
19. august 2003 - 12:35 #10
Ok dta Jeg prøver det lige...
Avatar billede dta Nybegynder
19. august 2003 - 12:39 #11
Prøv at gemme dette som en HTML fil og så hvor enkelt det kan gøres, jeg bruger ikke billeder men list-style-type og ændre fra en cirkel til en firkant.

<Head>
<STYLE type="text/css">
      UL a { list-style-type: disc }
      UL a:hover { list-style-type: square }
</STYLE>
</head>
<body>
<div>
<ul>
<a href="#"><li> link1 </li></a>
<a href="#"><li> link2 </li></a>
<a href="#"><li> link3 </li></a>
<a href="#"><li> link3 </li></a>
</ul>
</div>
</body>
Avatar billede hansgeist Nybegynder
19. august 2003 - 12:39 #12
Hej dta. Ja. Jeg må sige at nu har jeg givet de points til mm12010, men din løsning virker faktisk stik imod hvad jeg trode og meget enkel og elegant. Det er virkelige sejt. Hurra. Jeg opretter gerne spørgsmålet igen og giver dig 60 points også. Tak
Avatar billede dta Nybegynder
19. august 2003 - 12:44 #13
No Problem. Jeg er her ikke pga points!
Avatar billede hansgeist Nybegynder
19. august 2003 - 12:50 #14
hej dta jeg har oprettet spørgsmålet igen. så du kan sende dit svar og få dine venfortjente points.
Avatar billede Tony Juniormester
19. august 2003 - 13:24 #15
<STYLE type="text/css">
UL a        { list-style: disc;}
UL a:hover  { list-style: square; color:#555555;}
UL a:active  { list-style: circle;}
UL a:visited { list-style: none;}      
</STYLE>

Just my 5 cents ... :-)
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
07/0916:09 Bitdefender brokker sig Af FinnRasmussen i Andet sikkerhed
06/0921:00 Libre Office Impress Af Frank i Andre styresystemer
06/0911:47 VB script Af Jenshentze i Word
White papers
Flere white papers »