Søg
Avatar billede msoee Nybegynder
19. januar 2005 - 14:39 Der er 11 kommentarer og
1 løsning

CSS Imagehover smarteste metode?

Hey Eksperter

Er i gang med at lave et website og har brug for 16 knapper med en hover effekt (billedefiler benyttes som knapper)

Siden er opbygget i ren css altså ingen tables osv - det giver selvfølgelig en herlig ren source og jeg vil derfor gerne fortsat holde den så clean som mulig :)

Har derfor tænkt mig at bruge denne form for hover effekt:

http://zyph.dk/eksempler/csshover/

Men er så stødt på det problem at det script er lavet til én knap og egentligt ville komme til at fylde elendigt meget i mit stylesheet hvis der skal laves 16 knapper i den stil!

Har derfor tænkt mig om ikke det er muligt at f.eks. kalde nogle under punkter frem med knappernes navne f.eks.

#csshover #knap1
#csshover #knap2

hvor #knap1 og #knap2 egentligt bare skal hente billedefilen frem - og dermed genbruge #csshover 's settings?


Scriptet ser således ud:

#csshover {width: 100px;height: 22px;background: url(images/knap_eksempel.jpg) 0 -22px no-repeat;text-indent: -10000em;}

#csshover a {display: block;margin: 0; padding:0; width:100%; height:100%; overflow:hidden; text-decoration: none; background: url(images/knap_eksempel.jpg) top left no-repeat;}
   
div#outer a:hover {background-image: none;}
   
#csshover a:hover {background-image: none;}

Håber i kan hjælpe :)
Avatar billede morteeart Nybegynder
19. januar 2005 - 14:43 #1
det er muligt med css, men vil ikke virker i IE da den kun fatter hover effekten på links med href="" , så du er nød til at bruge javascript :(
Avatar billede msoee Nybegynder
19. januar 2005 - 14:52 #2
Glemte så lige at sige at den bruger href ;)

<div id="csshover">
<a href="#"><span>Link</span></a>
</div>

Dette er koden der benytter sig af css scriptet og havde derfor regnet med at det kunne laves f.eks sådan her:

<div id="csshover">
                   
<div id="knap1"><a href="#"><span>Link</span></a></div>
<div id="knap2"><a href="#"><span>Link</span></a></div>
<div id="knap3"><a href="#"><span>Link</span></a></div>

</div>

Virker fint både i IE og i Firefox - problemet er bare at jeg gerne vil ha lavet de underpunkter i mit stylesheet som nøjes med at hente billedefilerne frem men stadig benytter sig af hover indstillingerne :)

Mvh Michael
Avatar billede roenving Novice
19. januar 2005 - 14:54 #3
-- og en relativ simpel js-ting kunne se således ud:

function mouse(pic){
  if(pic.src.indexOf("_over")>0)
    pic.src=pic.src.replace(/_over\.jpg/i,".jpg");
  else
    pic.src=pic.src.replace(/\.jpg/i,"_over.jpg");
}

<img src="images/knap_eksempel.jpg" onmouseover="mouse(this)" onmouseout="mouse(this)">

(her har jeg bare brugt et image, men det kan sæ'fø'li' også laves på andre objekter, men selvfølgelig med en noget anderledes kode !-)
Avatar billede msoee Nybegynder
19. januar 2005 - 14:58 #4
Uhm lyder sku egentligt ganske smart den du har smidt der roenving - kan du ikke give et direkte eksempel på hvordan opstillingen skulle være med 2 knapper??

Hvis vi siger jeg har en knap der hedder start.jpg og en anden der hedder start_over.jpg - hvordan skal man opsætning da være?
Avatar billede msoee Nybegynder
19. januar 2005 - 15:01 #5
<head><script>
function mouse(pic){
  if(pic.src.indexOf("_over")>0)
    pic.src=pic.src.replace(/_over\.jpg/i,".jpg");
  else
    pic.src=pic.src.replace(/\.jpg/i,"_over.jpg");
}
</scsript>
</head>
<body>
<img src="images/start.jpg" onmouseover="mouse(this)" onmouseout="mouse(this)">
</body></html>
Avatar billede roenving Novice
19. januar 2005 - 15:03 #6
Nu siger du knap, og så er jeg ikke helt sikker på, hvad du mener, men f.eks. som en image-input (og bare med js-koden fra ovenfor !-)

<input type="image" src="start.jpg" onmouseover="mouse(this)" onmouseout="mouse(this)">
Avatar billede msoee Nybegynder
19. januar 2005 - 15:06 #7
Ja altså det skal være en knap :) href=""

Mig der tåger lidt rundt i det ;)
Avatar billede msoee Nybegynder
19. januar 2005 - 15:16 #8
Som det er lige nu viser den bare begge billeder:

<script>
function mouse(pic){
  if(pic.src.indexOf("_over")>0)
    pic.src=pic.src.replace(/_on\.jpg/i,".jpg");
  else
    pic.src=pic.src.replace(/\.jpg/i,"_on.jpg");
}
</script>



<a href="#" target="_self"><img src="images/knap_eksempel.jpg" onmouseover="mouse(this)" onmouseout="mouse(this)"></a>

Har jeg ikke ret i at at der mangler et eller andet - onmouseover="mouse(this)" onmouseout="mouse(this) benytter da ikke nogen del af javascriptet? :)
Avatar billede msoee Nybegynder
19. januar 2005 - 15:24 #9
*DUMMESLAG* - det virkede fint!

1000 tak :)

- roenving smid lige et svar så får du en skæppe point herfra :)
Avatar billede roenving Novice
19. januar 2005 - 15:28 #10
Velbekomme '-)

-- men behold selv langt de fleste af pointene !-)
Avatar billede msoee Nybegynder
19. januar 2005 - 15:31 #11
Selvom det måske ikke har været noget problem for dig at kaste sådan et script sammen har det nu engang været en kæmpe hjælp for mig - så du har skam fortjent dem allesammen ;)
Avatar billede roenving Novice
19. januar 2005 - 15:32 #12
Tak for point ;~}
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 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »