Sven Rh.: Hintergrundbild von Zelle bei Mouse Over ändern

Beitrag lesen

SELF-Forum

Hintergrundbild von Zelle bei Mouse Over ändern

Sven Rh.
– Informationen zu den Bewertungsregeln

Γειά σου, Jonas!

Wie gesagt möcht ich bei einem Mouse Over / Out das Hintergrundbild einer Tabellenzelle ändern. Ich habe dazu folgenden Lösungsansatz:

##########################CODE

<html>

<head>
<style>

  
Hier wäre noch das Atribut type="text/css" sinnvoll.  
  

> ~~~html

[code lang=css].imageOne{  

> background-image:url(bg1.jpg);  
> }  
> .imageTwo{  
> background-image:url(bg2.jpg);  
> }

</style>
  </head>

<body bgcolor="#FFFFFF">[/code]

Wenn schon CSS, warum nicht auch für die Hintergrundfarbe des body-Elements?

~~~html

<br>

<br>
  <br>

  
Auch Abstände lassen sich prima mit CSS einstellen, genauso gut wie Breite, Höhe und Rahmen der folgenden Tabelle.  
  

>   ~~~html

<table width="436" height="400" border="0" cellpadding="0" cellspacing="0">  

>     <tr>  
>       <td class="imageOne" onMouseOver="this.className='imageTwo'" onMouseOut="this.className='imageOne'">&nbsp;</td>  
>     </tr>  
>   </table>  
>   </body></html>

##########################CODE

Das Ganze klappt auch hervorragend.

Das habe ich, ehrlich gesagt, nicht anders erwartet. ;-)

Nur muss ich etwa in 12 Zellen jeweils andere Bilder laden können. Ich würde nun ganz gerne nicht 24 CSS Angaben haben für die 12 Zellen, sondern das Ganze direkt innerhalb von <td ...></td> haben. Wie beispielsweise bei folgendem:

<td align="center" valign="middle" onMouseOver="this.style.backgroundColor = '#CCCCCC'" onMouseOut="this.style.backgroundColor = '#DDDDDD'">TEXT</td>

Gibts da eine Lösung?

Ja, gibt es. Im td-Element notierst du dir Folgendes (Die CSS-Definitionen könntest du später in den style-Bereich im head verschieben):

<td style="text-align: center;vertical-align: middle;background: url(bg1a.jpg);" onMouseOver="this.style.background='url(bg1b.jpg)';" onMouseOut="this.style.background='url(bg1a.jpg)';">Text</td>

Gleiches System für die anderen Zellen auch, dort natürlich mit anderen Graphiken (bg2a.jpg und bg2b.jpg, bg3a.jpg und bg3b.jpg ...). Im Head müssen allerdings vorher - am besten beim Laden der Seite - die b-Graphiken per Javascript geladen werden; wie dies geht, steht in SELFHTML: images: Allgemeines zur Verwendung.

Αντίο!
Sven aus Bonn

--
Ἀεὶ πάντα ῥεῖ.
Selfcode: ie:% fl:( br:> va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:) mo:} zu:) - Selfcode dekodieren - Selfcode-Info
Beitrag melden
–
Informationen zu den Bewertungsregeln