kostenloser Webspace werbefrei: lima-city

onmouseover innerhalb eines Bildes

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   voloya

   voloya hat kostenlosen Webspace.

   15:09, 16.3.2011

   Hallo
   
   Ich hoffe, ich habe den Titel gut gewählt
   
   Ich habe folgendes:
   Eine Tabelle mit 5 mal 5 Feldern, alle Felder haben dasselbe Bild in sich. Jetzt würde ich gerne über einen mouseover-Effekt einstellen, dass wenn man mit der Maus über die Felder fährt ein neues Bild auftaucht[ein unterschiedliches Bild bei jedem Feld, quasi ein Memory-Button^^].
   Das ist ja eigentlich gar nicht so schwer. Leider weiß ich jetzt nicht, ob ich das besser mit CSS oder mit Javascript machen soll. Ich habe zwar schonmal bei meiner Webseite den Menübuttons einen mouseover-Effekt verpasst (mit CSS) aber das funktioniert anscheinend nur unter bestimmten Bedingungen (?) , jedenfalls hab ich das in meiner Tabelle nicht zum Laufen gebracht.
   
   Mit Javascript ists dann schon leichter, auch wenn ich keine Ahnung von Javascript habe aber die paar Codeschnipsel hat man sich ja schnell im Internet zusammengesucht. Also:
   

   <script
   language="JavaScript">
   <!--
   button1= new Image();
   button1.src = "knopf.jpg"
   button2= new Image();
   button2.src = "email.jpg"
   //-->
   </script>

   
   

   <a href="mailto:deine.mail@gmx.de"
   
   onmouseover="austausch1.src='email.jpg';"
   onmouseout="austausch1.src='knopf.jpg';">
   
   <img src="knopf.jpg"
   border="0" width="71"height="60"
   name="austausch1">
   </a>

   
   als ein Beispiel.
   Was jedoch jetzt mein Problem ist ist, dass die Bilder nicht sofort laden, wenn ich mit der Maus über sie drüberfahre. Sie müssen dann erst geladen werden. d.h. wenn man nicht lange genug mit der Maus über einem Tabellenfeld bleibt, wird kein Bild geladen und der Besucher sieht nichts.
   Bei meinem CSS-Menü habe ich alle Buttons in ein Bild gestopft, das dann sofort ganz geladen wird, wenn die Seite zum ersten Mal geladen wird. Bei mouseover wird dann einfach ein anderer Pixelbereich des Bildes wiedergegeben.
   
   So.. wie mache ich das bei meinem Tabellenbeispiel? Eine CSS-Lösung wäre mir lieber, aber auch Javascript ist kein Problem, das hat ja eigentlich fast jeder aktiviert.
   
   Ich hoffe, ich habe alles ausführlich genug erklärt.
   
   mfg
   
   
   Beitrag zuletzt geändert: 16.3.2011 15:10:34 von voloya

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. sneppa

   

   sneppa hat kostenlosen Webspace.

   16:33, 16.3.2011

   Hallo voloya,
   
   entweder du lädst die Bilder mit Javascript vor (Image Klasse),
   
   oder du zeigst die Bilder in einem div an, das ausgeblendet ist,
   
   oder du machst es mit einem Sprite-Bild (Bild als <a> Hintergrund und das :hover Element dann mit background-position: -Xpx 0;).
   
   Beitrag zuletzt geändert: 16.3.2011 16:34:23 von sneppa

4. suparichi

   suparichi hat kostenlosen Webspace.

   12:56, 27.3.2011

   ich glaube die zweite lösung von sneppa ist ziemlich gut, und spar dir zusätzlich javascript:
   
   einfach diesen code irgendwo auf der seite einblenden, der lädt dir unsichtbar die images vor:
   
   

   <div style="display:none">
   <img src="email.jpg" alt="" />
   <img src="knopf.jpg" alt="" />
   </div>

   
   
   damit ist dein problem hoffentlich gelöst.

5. k*********h

   13:22, 14.4.2011

   Hi voloya,
   
   es wurden ja schon einige lösungsansätze vorgeschlagen, allerdings rät mir meine erfahrung mit diesem thema noch etwas anderes:
   
   da selbst bei vorgeladenen bildern ein flackereffekt beim bildwechsel auftaucht (zumindest in manchen browserversionen) würde ich dir raten den bildaustausch nicht über javascript also in diesem falle mouseout/mouseover zu regeln, sondern ganz einfach mittels der css-pseodoklasse :hover
   das bietet ausserdem den vorteil das es auch funktioniert wenn javascript im browser deaktiviert ist.
   
   das vorladen der bilder kann natürlich so gemacht werden wie suparichi geschrieben hat.
   
   also:
   

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
   
   
   <style type="text/css">
   	.bildwechselemail {
   		display:block;
   		width:100px;
   		height:100px;
   		background-image:url(knopf.jpg);
   	}
   	.bildwechselemail:hover {
   		background-image:url(email.jpg);
   	}
   </style>
   
   
   </head>
   <body>
   
   
   <div style="display:none;">
       <img src="email.jpg" alt="" />
       <img src="knopf.jpg" alt="" />
   </div>
   
   
   <a class="bildwechselemail"></a>
   
   
   </body>
   </html>

6. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   15:57, 14.4.2011

   kleines-ich schrieb:
   da selbst bei vorgeladenen bildern ein flackereffekt beim bildwechsel auftaucht (zumindest in manchen browserversionen) würde ich dir raten den bildaustausch nicht über javascript also in diesem falle mouseout/mouseover zu regeln, sondern ganz einfach mittels der css-pseodoklasse :hover

   
   CSS ist sicher der bessere Weg. Und den letzten Flackereffekt kann man noch umgehen, wenn man die Bilder in ein sprite packt und beim hovern den Hintergrund nur verschiebt.
   
   Info und Demo zu Sprites: *click*
   
   FF
   
   Beitrag zuletzt geändert: 14.4.2011 15:57:48 von fatfreddy

7. sneppa

   

   sneppa hat kostenlosen Webspace.

   16:22, 14.4.2011

   Es wurden hier jetzt schon mehrmals CSS/Sprite/Javascript Lösungen angesprochen,
   ich denke das reicht und jeder kann seinen Favorit auswählen ;)
   
   Closed
   
   Bei Rückfragen einfach PN an mich.
   
   Beitrag zuletzt geändert: 14.4.2011 16:23:33 von sneppa

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?