[JS] Mouse over...

Siberian..Husky · 7. Oktober 2004

Re: Java Skript - Mouse over...

für den ie solltest du am besten alles hintereinander schreiben wo auf keinenf all ein leerzeichen auftauchen soll. das macht sonst nur probleme, hab mich schon stunden tot gesucht weil in tabellen layouts irgendwo beim IE immer irgendwas nicht gepast hat.... ich hasse diesen "browser"

Eliah · 7. Oktober 2004

Re: Java Skript - Mouse over...

Jo, Danke für den Tip!

Wen ich aber den gesamten Code aneinanderschiebe wird es

1. beim editieren unübersichtlich
2. werden bei der ausgabe alle Bilder aneinadergeschoben
3. bleibt beim letzten Bild noch immer ein "_" erhalten. - Dank IE.

Grins.

Macht aber nix.

Ich werde mich wohl an das erste "lange" Skript halten damit hat der IE wenigstens keine Probleme.

Eine Frage die ich noch dazu hätte: Wie schaffe ich es das alle Bilder Pixelgenau nebeinander erscheinen.....? (Wahrscheinlich mal wieder ne tübische Newbie frage...) grins...

Raechaer · 7. Oktober 2004

Was hältst du denn davon das Ganze mit CSS zu machen und somit komplett auf Javascript zu verzichten? Pixelgenaue Ausrichtung der Bilder ist mit CSS auch kein Problem.

The Prophet · 7. Oktober 2004

Bilderwechsel mit CSS ist aber schon recht Komplex

Das ist mit JS einfacher zu erledigen aber mit CSS sicherlich elganter...

GeYe · 9. Oktober 2004

hehe the Prophet da stimme ich dir zu ... mit ein bisschen Geschick kann man auch sich die Preload-Javascript Sache sparen und sie trotzdem integriert haben ;-) ...

Ein Tip dazu ist, dass man Hintergrundbilder mit CSS mit px genauen Angaben versehen kann ... leider hat das auch seine vor- und nachteile.

The Prophet · 9. Oktober 2004

Für alle die mal sehen wollen wie es auch mit CSS geht

Hab ich neulich mal gefunden...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 



<style type="text/css">    
/*<![CDATA[*/ 

html,body   { 
   margin: 0; 
   padding: 0; 
   background-color: #FF9933; 
   color: #000000; 
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size: 100.01%; 
} 

#gallery_position { /*im Textfluss*/ 
   margin: 3em; 
} 

#gallery { 
   position: relative; 
   width: 422px; 
   height: 380px; 
   border: 1px solid #000000; 
   background-color: #EFEDEC; 
    
} 

#gallery img { 
   width: 400px; 
   height: 250px; 
   margin: 9px; 
   border: 1px solid #000000; 
} 

#gallery a, #gallery a:visited, #gallery a:hover { 
   display: block; 
   float: left; 
   width: 75px; 
   height: 47px; 
   margin: 3px; 
   border: 1px solid #000000; 
   text-decoration: none;    
} 

#gallery a span, #gallery a strong { /* loading-Block */ 
   display: none; 
} 

#gallery a span em { 
   display: block; 
   width: 400px; 
   height: 250px; 
   margin: 0; 
   border: 1px solid #000000; 
} 

#gallery a:focus, #gallery a:active  { 
   border: 1px solid #666666; 
} 

#gallery a:focus span, #gallery a:active span, #gallery a:active:hover span  { 
   position: absolute; 
   display: block; 
   z-index: 100; 
   left: 9px; 
   top: 64px; 
   width: 402px; 
   font-size: 0.8em; 
   color: #000000; 
} 


#gallery a:focus strong, #gallery a:active strong, #gallery a:active:hover strong  { /* loading-Block */ 
   position: absolute; 
   display: block; 
   z-index: 100; 
   left: 4px; 
   top: 60px; 
   width: 375px; 
   height: 275px; 
   padding: 20px; 
   background-color: #EFEDEC; 
   color: #1199FF; 
   font-size: 0.8em;    
} 


/*]]>*/ 
</style> 


</head><body> 



<div id="gallery_position"> 

<div id="gallery"> 
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb2.jpg)" href="#"> 
   <strong>Loading......</strong> 
   <span> 
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic2.jpg)">&nbsp;</em> 
      Photographs courtesy of morgueFile.com 
   </span> 
</a> 
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb3.jpg)" href="#"> 
   <strong>Loading......</strong> 
   <span> 
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic3.jpg)">&nbsp;</em> 
      Photographs courtesy of morgueFile.com 
   </span> 
</a> 
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb4.jpg)" href="#"> 
   <strong>Loading......</strong> 
   <span> 
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic4.jpg)">&nbsp;</em> 
      Photographs courtesy of morgueFile.com 
   </span> 
</a> 
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb5.jpg)" href="#"> 
   <strong>Loading......</strong> 
   <span> 
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic5.jpg)">&nbsp;</em> 
      Photographs courtesy of morgueFile.com 
   </span> 
</a> 
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb6.jpg)" href="#"> 
   <strong>Loading......</strong> 
   <span> 
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic6.jpg)">&nbsp;</em> 
      Photographs courtesy of morgueFile.com 
   </span> 
</a> 

<img alt="bild" src="http://www.stunicholls.myby.co.uk/menu/pic2.jpg" /> 
</div> 


</div> 


</body></html>

GeYe · 9. Oktober 2004

sehr schön prophet ... es gibt aber auch eine andere Lösung:

Man hat ja eigentlich 3 Zustände (mit der Maus 1. darüber, 2. außerhalb, 3. ohne Mausberührung im Standardzustand). Man stelle sich vor, man speichert diese 3 Zustände in einer Grafik untereinander. Sprich oben 1. darüber, ...

Jetzt lädt der Browser ja das ganze Bild, sprich alle 3 Zustände auf einen schlag und mit CSS muss man nur noch bestimmen, das nur ein bestimmter Teil des Bildes angezeigt wird, sprich nur das obere Drittel (Zustand 1) oder mittleres Drittel (Zustand 2) oder unteres Drittel (Zustand 3)

=> effektiv hat man einen Preloader und keine Ladezeit mehr, wenn man mit der Maus über eine Mausovergrafik fährt (da es keine mehr ist

).

Ich habe leider die CSS-Lösung nicht mehr parat und meine habe ich zu stark abgeändert, so dass da wohl keiner mehr durchblicken würde.

Problem ist aber vor allem, dass CSS nicht immer von jedem Browser richtig dargestellt wird.

The Prophet · 9. Oktober 2004

Ja eben, das von mir gepostete geht auch mit Mouseover (Bildwechsel) aber dann gibt es wohl einige Probleme mit älteren Browsern. Aber wie du schon sagtest CSS und eigentlich schon HTML sind für eigentlich alle Browser die reinsten Problemkinder, verstehe nicht warum man sich nicht auf ein einheitliches Maß einigen kann. W3C.org ist aber denke ich der richtige weg...

Suche

[JS] Mouse over...

Siberian..Husky

Lt. Commander

Eliah

Cadet 4th Year

Raechaer

Lt. Junior Grade

The Prophet

Rear Admiral

GeYe

Lt. Junior Grade

The Prophet

Rear Admiral

GeYe

Lt. Junior Grade

The Prophet

Rear Admiral

Ähnliche Themen