Mouse Hover

[nes-evin]

Hio,

ich habe hier folgenden link:

<td height="18" background="<?PHP echo $cm_sitepath; ?>/layout/4.0/kategorie2.jpg" ><font color="ffffff" size="2" face="Arial, Helvetica, sans-serif"><a href="<?PHP echo $cm_sitepath; ?>/cmpro.ext/news.php" class="link10">news</a></font></td>

als bg soll ein mouse hover sein so das der bg bei mouse over zu

<?PHP echo $cm_sitepath; ?>/layout/4.0/kategorie2_hover.jpg

wechselt.

Wie kann ich das machen?

Greez
EvIN

 

[xxenon]

--> JavaScript

ala

(...) onmouseover="this.background.src='new.jpg';" onmouseout="this.background.src='old.jpg';"

soll jetzt mal nur ne ungefähre Anleitung sein.


Regards...

 

[nes-evin]

kann ich nix mit anfangen.
srY

wie heist denn dann der komplette link?

 

[Xaicon]

<td height="18" background="<?PHP echo $cm_sitepath; ?>/layout/4.0/kategorie2.jpg" 
   onmouseover="this.background.src='<?PHP echo $cm_sitepath; ?>/layout/4.0/kategorie2_hover.jpg';" 
   onmouseout="this.background.src='<?PHP echo $cm_sitepath; ?>/layout/4.0/kategorie2.jpg';">
<font color="ffffff" size="2" face="Arial, Helvetica, sans-serif">
<a href="<?PHP echo $cm_sitepath; ?>/cmpro.ext/news.php" class="link10">news</a>
</font>
</td>

 

[nes-evin]

Sorry aber das geht nicht.

Was kann noch falsch sein?

 

[max]

Wenn ich das richtig verstehe dann willst du einfach das Hintergrundbild beim Mouseover wechseln.

Das kannst du auch mit CSS machen, schau dir einfach mal das an:
http://www.tutorials.de/tutorials156516.html

 

[nes-evin]

Danke erstmal für die Tips.

Ich habe es jetzt mit css gelöst, und zwar.

habe in die tabelle

class="table"

eingefügt. Und in die CSS datei:

td.table:hover {background-image: url(http://neander-esports.r-a-t-s-media.de/test/cmpro.extern2/layout/4.0/kategorie2_01-over.gif); ackground-repeat: no-repeat;}

Aber es geht nur beim Mozilla.
Wenn ich die Seite mit Internetexplorer angucke, geht das nich.

Woran liegt das?

 

[max]

Ich habs so gemacht:

#navi a {
	display: block;
	width: 200px;
	background-image:  url(kategorie2_01.gif);
	background-repeat: no-repeat;
	}

#navi a:link, #navlist a:visited {
	text-decoration: none;
	}

#navi a:hover {
	background-image:  url(kategorie2_01-over.gif);
	background-repeat: no-repeat;
	}

#active a:link, #active a:visited, #active a:hover {
	background-image:  url(kategorie2_01-over.gif);
	background-repeat: no-repeat;
	}

Und in die Tabelle machst du dann so ungefähr:

<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td><div id="navi"><a href="#">Punkt 1</a></div></td>
  </tr>
</table>

Also bei mir funktioniert das so jetzt optimal in beiden Browsern.

 

[nes-evin]

aber das ist doch nur wenn die tabelle verlinkt ist oder?

 

[max]

Solange der Link in den divs steht geht das ohne Tabelle auch.

<div id="navi"><a href="#">Punkt 1</a></div>