links - hover m.m. ved brug af grafik

et gamelt test eksempel jeg har rodet med:
http://hjem.get2net.dk/arntsen/eksperten/menu/menu_05.htm

/cdc

Tjooo, det er lidt af det rigtige. Men jeg vil såmænd bare lave et tekstlink:

<a href="#" class="menu">Link1</a><br>
<a href="#" class="menu">Link2</a><br>

Når man fører musen hen over de enkelte link, skal det lille GIF-billede dukke op til venstre, og det samme billede skal stå ud for det valgte link. Forstår du hvor jeg vil hen? :o)

Ok, kan se i din kode hvad du mener. Prøver lige ...

Hvis jeg har tabellen:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="menu">
  <tr>
    <td width="2%"></td>
    <td width="98%"><a href="#">Link1</a></td>
  </tr>
</table>

- hvordan laver jeg det så? Jeg skal jo have det lille GIF-billede stående til venstre for det valgte menupunkt. Det er også sådan hover-effekten skal være: Når man fører musen hen over linket, kommer GIF-billedet frem.

Prøver at se, om jeg kan finde et link til en side, hvor de benytter denne menu ...

Jeg kan ikke lige finde en på stående fod, men det jeg efterlyser, er det samme princip som i spørgsmålet. Istedet for at få hele cellen til at skifte farve, vil jeg bare have et GIF-billede yderst til venstre for linket, både ved hover, og når linket er valgt. Hvordan sætter jeg det ind i kode, cdc?

dvs. du stadig vil bruge text, for at fprstå dig ret.
[ikon] linktext og så skal ikonet skifte

Lige nøjagtigt, pånær GIF-billedet skal ikke skifte.

GIF Link1 (det valgte link)
    Link2
    Link3

GIF Link1 (det valgte link)
GIF Link2 (musen holdes hen over, og der trykkes)
    Link3

    Link1
GIF Link2 (det valgte link)
    Link3

Er det noget, der er til at finde ud af?

Om det bliver

<td>GIF&nbsp;&nbsp;Link1</td>

eller hvad, det er op til dig. Håber du kan hjælpe! :o/

Jeg prøver at lave en transparent gif som baggrundsbillede nr. 1

se denne er det noget i denne stil:
http://www.cement-stoeberi.dk/

Der er noget af det! Men så er der lige koden ...?

Jeg kan se dette fra deres CSS, men jeg kan ikke se pilen nogen steder:

}
a.menu {
FONT-SIZE: 10px;
background : #CE0000;
color: #ffffff;
text-decoration : none;
display:block;
width:100%;
border-top: 1 solid #CE0000;
border-left: 1 solid #CE0000;
border-right: 1 solid #CE0000;
letter-spacing: 4px;
padding: 4;
}

a.menu:hover {
FONT-SIZE: 10px;
background : #000000;
color: #ffffff;
display:block;
width:100%;
border-top: 1 solid #636363;
border-left: 1 solid #636363;
border-right: 1 solid #636363;
letter-spacing: 4px;
padding: 4;
}
a.menu:active{
FONT-SIZE: 10px;
background : #636363;
color: #ffffff;
display:block;
width:100%;
border-top: 1 solid #9C9C9C;
border-left: 1 solid #9C9C9C;
border-right: 1 solid #9C9C9C;
letter-spacing: 4px;
padding: 4;
}

Den kommer her:

<a href="profil.htm" class="menu" target="text">&nbsp;<img border="0" src="images/menu_pil.gif" align="middle" width="15" height="10"> FIRMAPROFIL &nbsp;</a>

Kan du hjælpe mig med at sætte noget kode sammen?

Link:
    FONT:11px Verdana, Arial, Helvetica;
    TEXT-DECORATION: none;
    COLOR: #868686;
Hover:
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(includes/images/bullit.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
Active:
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(includes/images/bullit.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;

Hvordan det skal sættes op, håber jeg du kan hjælpe med? Det skal IKKE være BLOCK :o)

Nu ser mit CSS således ud:

A.menu {
    FONT:11px Verdana, Arial, Helvetica;
    TEXT-DECORATION: none;
    COLOR: #868686;
    WIDTH: 100%;
}
A.menu:hover
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(includes/images/bullit.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
}
A.menu:active{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(includes/images/bullit.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
}

- men jeg får naturligvis ikke min bullit.gif med.

Jeg tror de har lavet det på den måde (på http://www.cement-stoeberi.dk/), at der ligger en rød pil i forvejen. Den er selvfølgelig usynlig, når cellen er rød, men den forbliver rød, når cellen bliver sort, så det ser ud som om, at der kommer en pil frem. Nogen idéer?

Jeg skal snart gå, håber du har en god idé :o)

kigger sener på det, sidder på arbejde nu

Ok, vi snakkes :o)

:o)

Jeg har fundet ud af det, man skal tilpasse en transparent GIF til cellen, og derefter en transparent GIF med en bullit i venstre side. Laver man CSS sådan her, funker det, men det er jo noget usmidigt, hvis højden/bredden på cellen forandres.

A.menu
{
    BACKGROUND-IMAGE: url(images/menu_bg_transp.gif);
    FONT:11px Verdana, Arial, Helvetica;
    TEXT-DECORATION: none;
    COLOR: #868686;
    WIDTH: 100%;
}
A.menu:hover
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_red.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
}
A.menu:active
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_red.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
}

Det bliver sådan i første omgang. Jeg håber du kan finde en lidt mere holdbar løsning (hvis nu cellestørrelsen forandres), når du får tid :o)

Lægger du et svar? Tak for hjælpen :o)

cdc, jeg mangler et svar :o)

cdc?

Forøvrigt: Når jeg laver dette link:

<a href="#" class="menu">Log ind</a>

virker det fint, men når jeg laver dette:

<a href="/<%=strURL%>/wordofexplanation.asp" class="menu">Forord</a>

er det kun Hover, der fungerer. Men jeg får ikke den røde GIF med. Hvordan kan det være?

Det er ligemeget om jeg skriver <%=strURL%> eller skriver mappen navn:

1: <a href="/<%=strURL%>/wordofexplanation.asp" class="menu">Forord</a>
2: <a href="/minmappe/wordofexplanation.asp" class="menu">Forord</a>

Ingen af delene sætter GIF-billedet ind, når linket er aktivt.

(<%=strURL%> ER defineret, og linket virker)

så svarer jeg.....

sorry for ventetiden, godt du er tålmodig :o)

10-4 :o)

Har du en idé til 03/12-2003 00:20:56

1000 tak for hjælpen :o)

ikke umiddelbart, men vil lige kigge på det

Ok, håber du kan komme op med noget brugbart.

Mit CSS:
A.menu
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_transp.gif);
    TEXT-DECORATION: none;
    COLOR: #868686;
    WIDTH: 100%;
    PADDING: 4px;
}
A.menu:hover
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_red.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
    PADDING: 4px;
}
A.menu:active
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_red.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
    PADDING: 4px;
}

Min menu:

<table border="0" cellpadding="2" width="90%" cellspacing="0">
    <tr>
        <td colspan="2"><span class="headline"><b>.</b>menu</b></span></td>
    </tr>
    <tr>
        <td width="2"></td>
        <td><a href="/<%=strURL%>/" class="menu">Forside</a></td>
    </tr>
    <tr>
        <td></td>
        <td><a href="#" class="menu">Log ind</a></td>
    </tr>
</table>

PS: Det virker fint på "Log ind", men ikke på "Forside". Det virker som om det er almindelige links, der overruler A.menu

A
{
    FONT-SIZE: 11px;
    COLOR: #868686;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    TEXT-DECORATION: none
}
A:hover
{
    COLOR: #000000;
    TEXT-DECORATION: none
}

og du har ikke flere css liggende som konflikter ?

Nope, bruger kun ét CSS

kan du paste hele dit css ind her

hvad med active link virker den ?
prøv evnt. men a.menu.link

a.menu:link  sorry :o)

Dette er det foreløbig CSS:

BODY
{
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #9d9da1;
    SCROLLBAR-3DLIGHT-COLOR: #f1efe2;
    SCROLLBAR-ARROW-COLOR: #ffff00;
    SCROLLBAR-TRACK-COLOR: #c0c0c0;
    SCROLLBAR-DARKSHADOW-COLOR: #716f64;
    SCROLLBAR-BASE-COLOR: #000000;
}
A.menu
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_transp.gif);
    TEXT-DECORATION: none;
    COLOR: #868686;
    WIDTH: 100%;
    PADDING: 4px;
}
A.menu:hover
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_red.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
    PADDING: 4px;
}
A.menu:active
{
    FONT:11px Verdana, Arial, Helvetica;
    BACKGROUND-IMAGE: url(images/menu_bg_red.gif);
    TEXT-DECORATION: none;
    COLOR: #000000;
    WIDTH: 100%;
    PADDING: 4px;
}
A
{
    FONT-SIZE: 11px;
    COLOR: #868686;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    TEXT-DECORATION: none
}
A:hover
{
    COLOR: #000000;
    TEXT-DECORATION: none
}
.headline
{
    FONT-SIZE: 16px;
    COLOR: #000000;
    LINE-HEIGHT: 18px;
    FONT-FAMILY: Arial, Verdana, Helvetica
}
.tekst11
{
    FONT-SIZE: 11px;
    COLOR: #000000;
    LINE-HEIGHT: 18px;
    FONT-FAMILY: Verdana, Arial, Helvetica
}
.input
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    FONT-SIZE: 11px;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    FONT-FAMILY: Verdana, Helvetica, Arial;
    BACKGROUND-COLOR: #ffffcc
}
.input0
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    FONT-SIZE: 10px;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    FONT-FAMILY: Verdana, Helvetica, Arial;
    BACKGROUND-COLOR: #ffffcc
}
.input1
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    FONT-SIZE: 11px;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    FONT-FAMILY: Verdana, Helvetica, Arial
}

Håber du kan finde en løsning :o)