✔ Schriftzug über Bildern bei Mouse-Over! Need Help!

[phil-ip]

Ich benutze ein Mouse-Over Effekt. Schaut selbst:

<script language="JavaScript" type="text/javascript"> 
out_1=new Image; 
out_1.src="images/button_inaktiv.jpg"; 
over_1=new Image; 
over_1.src="images/button_aktiv.jpg"; 
 </script>

....

<td height="22"> <a href="index.php?mod=news&action=recent" target="_self"><img border="0" src="images/button_inaktiv.jpg" width="202" height="22" onMouseOver="this.src=over_1.src;" onMouseOut="this.src=out_1.src;" onClick="location.href='#'" style="cursor:hand"></a></td>

Nun werden die Buttons als Images eingebunden. Wie kann ich nun noch einen Schriftzug auf die Buttons legen? Ich möchte diesen nicht in der jpg speichern, sondern direkt in der html-Datei.

Ich bitte um Hilfe! Wie ändernt man das Script, damit bei Mouse-Over der Hintergrund der Tabellenzelle geändert wird. So müsste das doch theoretisch funktionieren. Denn in eine Tabellenzelle (mit Image als Hintergrund) kann man immer etwas schreiben.

mfG phil

 

[Sven Mintel]

so geht das

document.getElementById('idDerZelle').style.backgroundImage="url(pfad/zum/bild.jpg)";

 

[phil-ip]

hi, danke für die antwort schon mal. könntest du deinen vorschlag bitte etwas erläutern, damit ich das auch selbst anwenden kann! Danke phil

 

[Sven Mintel]

Mmmh..da gibts eigentlich nicht viel weiter zu erklären:

<table>
  <tr>
    <td onmouseover="this.style.backgroundImage='url(images/button_aktiv.jpg)';">
      text
    </td>
  </tr>
</table>

uswusf. ...das ist schon alles

Es wird halt per JS das CSS-Format background-image geändert.

Du kannst auch ganz auf JS verzichten, und es über die CSS-Pseudoklassen für Links machen, da müsstest du das Format dann aber für den Link festlegen, damits auch im IE klappt.

 

[phil-ip]

wie mach ich das denn, dass das bild auch wieder zum normalen bild wechselt?

mfG phil

 

[Sven Mintel]

mmh...mit onmouseout natürlich.

 

[Gumbo]

Wieso nicht gleich CSS:

<a href="./index.php?mod=news&action=recent">Verweistext</a>

a {
	display:		block;
	width:			202px;
	height:			22px;
	background-image:	url(images/button_inaktiv.jpg);
}
a:hover {
	background-image:	url(images/button_aktiv.jpg);
}

Die Regeln könnten selbstverständlich auch nur auf eine Gruppe von Verweisen spezifiziert werden.

 

[phil-ip]

Hi, ich hab das jetzt so wie Sven Mintel es beschrieben hat gemacht.

http://philli.ph.ohost.de/sell/arcora/bxcp/

Wenn ich den MouseOver-Effekt auf meinem PC teste, dann funktioniert es wunderbar. Auf dem Webserver funktioniert dies allerdings scheinbar nicht. Wodran könnte das liegen?

mfG phil

 

[Sven Mintel]

Entweder stimmen die Pfade nicht, oder du hast die Bilder nicht hochgeladen.
Dort, wo sie sein sollten, sind sie jedenfalls nicht.

 

[phil-ip]

bilder sind hochgeladen und die pfade sollten eigentlich auch stimmen...

schau mal bitte in den quelltext!


mfG phil

auf meinem pc (also lokal) funktioniert der mouseover-effekt ja!