# Mouse Hover



## nes-evin (17. Mai 2004)

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 (17. Mai 2004)

--> 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 (17. Mai 2004)

kann ich nix mit anfangen. 
srY

wie heist denn dann der komplette link?


----------



## Xaicon (17. Mai 2004)

```
<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 (17. Mai 2004)

Sorry aber das geht nicht.

Was kann noch falsch sein?


----------



## max (17. Mai 2004)

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 (18. Mai 2004)

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 (18. Mai 2004)

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 (18. Mai 2004)

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


----------



## max (20. Mai 2004)

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

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


----------

