Notifikationer

Markér alle som læst Log ud

zahi Nybegynder

13. juni 2007 - 15:10 Der er 12 kommentarer og
2 løsninger

Links der skifter farve

Hej!

Jeg har lavet en menu der indehoder nogle links. Hver link er lavet som et billede. Det jeg vil gerne lave er at når man har besøgt et link (menu button) at den skifter til en anden billede bagefter, dvs. at den viser en ny billede når link er aktiveret.

Kan man lave denne i css?

Synes godt om

roenving Novice

13. juni 2007 - 15:15 #1

F.eks.

#menu a, #menu a:link{background-image:url(ubesoegtLink.gif);}
#menu a:visited{background-image:url(besoegtLink.gif);}
#menu a:hover{background-image:url(hoverLink.gif);}
#menu a:active{background-image:url(activeLink.gif);}

-- til gengæld kan du ikke udskifte et image på den måde !-)

Synes godt om

jokkejensen Novice

13. juni 2007 - 15:25 #2

Første linie skal nok se sådan her ud så:

#menu a, #menu a:link
{
background-image:url(ubesoegtLink.gif);
display:block;
height: xx px; */ højden på billedet /*
width: xx px; */ bredden på billedet /*
}

Synes godt om

zahi Nybegynder

13. juni 2007 - 15:27 #3

hvad skriver jeg i html ?

Synes godt om

roenving Novice

13. juni 2007 - 15:33 #4

Synes godt om

mclemens Nybegynder

13. juni 2007 - 15:40 #5

Evt. kaster du også en class på det link, der skal være aktivt
inde på den nye side (hvis det ikke er frames sider) ... f.eks.:

<div id="menu">
<a href="http://ditlink.dk" class="active">Link</a>
</div>

#menu a:active, #menu a.active {background:url("activeLink.gif");}

Synes godt om

zahi Nybegynder

14. juni 2007 - 08:18 #6

virker ikke.
jeg tror at det er fordi jeg har en billede som link"tekst"
her er kode i html:
<div id="men">
<a target="page" href="../sider.asp">
<img border="0" src="../link.gif" align="right" width="142" height="32" >
</a> </div></p>

Synes godt om

mclemens Nybegynder

14. juni 2007 - 08:55 #7

id="men" ? ... Og så kan du vel ændre billedet til
tekst eller gøre billedet transparent / delvis transparent
hvis man skal kunne se baggrunden under billedet eller
hvis billede som link tekst sammen med baggrunden foretrækkes
så kaste en id på hver enkelt link og definere en stribe:

#menu a#linkid {background-image:url("linkid-ubesoegtLink.gif");display:block;height: 32px;width: 142px;}
#menu a#linkid: ...

... for hver af de billeder der skal kunne skiftes
og oprette de billeder som du har behov for.

Synes godt om

zahi Nybegynder

14. juni 2007 - 11:06 #8

id="men" var en stave fejl :-)
Jeg vil ikke ændre noget jeg vil bare at når man trykker på en billede (som er en link) at den så viser en anden billede samme sted (fordi link er aktiv)

Synes godt om

mclemens Nybegynder

14. juni 2007 - 12:21 #9

Du vil ikke ændre noget, men du vil ændre billedet der vises ?
- Du kan (da du bruger frames) udover css baggrunde og farvet tekst
eller transparent billede med tekst og bagvedliggende ændrende
baggrund også vælge css switching af det viste billede ...

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

<script type="text/javascript">
</script>
<style type="text/css">
a img {border:0;}
#menu a {display:block;}
#menu a .i1 {display:none;}
#menu a:active img.i1,#menu a:hover img.i1 {display:inline;}
#menu a:active img,#menu a:hover img {display:none;}
</style>

</head><body>
<div id="menu">
<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" class="i1" alt=""><img src="http://www.eksperten.dk/img/flag_blue.gif" alt=""></a>

<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" class="i1" alt=""><img src="http://www.eksperten.dk/img/flag_blue.gif" alt=""></a>

<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" class="i1" alt=""><img src="http://www.eksperten.dk/img/flag_blue.gif" alt=""></a>

<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" class="i1" alt=""><img src="http://www.eksperten.dk/img/flag_blue.gif" alt=""></a>

<iframe name="page" style="width:10px;"></iframe>
</body></html>

- Men :active i css misforståes tit som værende et link der henviser
til den aktive side href som er loadet, mens aktive blot betyder det
aktive link, så det bliver normalt farvet efter man klikker væk fra
linket selvom siden man er på stadig er siden linket henviser til.

(derfor mit tidligere forslag om at sætte en class="active" på det link
der hører til den side som man er under, men du kører frames istedet)

... Der kan selvfølgelig også leges med js istedet, men jeg anbefaler evt.
at udskifte frames med noget serverside include og så sætte den class="active"
afhængig af hvilken side man er under ... Her er et eksempel på noget js:

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

<script type="text/javascript">
var act=null;
function actl(e){
if(e!=act){
if(act)act.src="http://www.eksperten.dk/img/flag_green.gif";
act=e;e.src="http://www.eksperten.dk/img/flag_blue.gif";
}
}
</script>
<style type="text/css">
a img {border:0;}
#menu a {display:block;}
</style>

</head><body>
<div id="menu">
<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" alt="" onclick="actl(this)"></a>

<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" alt="" onclick="actl(this)"></a>

<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" alt="" onclick="actl(this)"></a>

<a href="#" target="page"><img src="http://www.eksperten.dk/img/flag_green.gif" alt="" onclick="actl(this)"></a>

<iframe name="page" style="width:10px;"></iframe>
</body></html>

Synes godt om

zahi Nybegynder

14. juni 2007 - 14:31 #10

øv...
jeg tror at jeg bliver nødt til at fjerne frammes.
roenving og mclemens vil I sende et svar så jeg kan dele points.

Jeg har en ny næsten det samme spørgsmål.
I kan svare eller vælge at jeg opretter en ny spørgsmål.
Det drejer sig om forms. Kan jeg ændre udsende på et f.eks. submit knap så den skifter farve efter man har trykket på knappen?

Synes godt om

mclemens Nybegynder

14. juni 2007 - 16:42 #11

Her er det ene af svarene :o)

... Hvad med:
<input type="submit" value="click" onclick="this.style.background='#f00';">
- med css kan du ikke medmindre at siden skifter ved submit og du sætter en class
(eller id) via. serverside output baseret på om der lige er submittet eller ej ...

- Du kan selvfølgelig også lave det via. js onload hvis
du kører uden frames forudsat at det er get og ikke post ...

<script type="text/javascript">
window.onload=function(){
if(location.search!="")document.getElementById("sub").style.background='#f00';
}
</script>

...

<input type="submit" value="click" id="sub">

Synes godt om

roenving Novice

15. juni 2007 - 12:35 #12

Oki '-)

Synes godt om

roenving Novice

15. juni 2007 - 13:13 #13

-- og tak for point ;~}

Synes godt om

mclemens Nybegynder

15. juni 2007 - 13:52 #14

Og tak for point også :o)

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