hilfe hover

kornyclown · 16.02.2009

ich will ein bild als link einfügen mit hover effekt. dumm wie ich bin hatte ich das schon mal im internet recherchiert, gefunden und erfolgreich umgesetzt. jetz wollte ich das ganze nochmal üderarbeiten und dachte mir machste einfach alles weg und ganz neu. nur weiß ich den tag nichmehr ganz genau. irgendwas fehlt noch und irgendwas muss noch verändert werden.

hier mein vorläufiger text:

<div id="pa">
<style type="text/css">
a.pa {
image:url ('pics/projektagentur1.jpg');}
a:hover {
image:url ('pics/projektagentur2.jpg');}

</style>
<a href="http://www.Projektagentur-Berlin.de" target="blank" >
<img src="pics/projektagentur1.jpg" border="0" class="pa"/></a>
</div>

wäre cool wenn mir jemand da helfen kann

Jazo · 16.02.2009

AW: hilfe hover

Ich würde einfach dieses Script nehmen:

HTML:

<span
   onMouseOver="document.Bild.src='bildhover.gif'"
   onMouseOut="document.Bild.src='bildnormal.gif'">
<a href="">
   <img src="bildnormal.gif" name="Bild" border="0">
</a>
</span>

MFG
Jazo

jens260181 · 16.02.2009

AW: hilfe hover

ähm, es gibt im css kein image. was du brauchst ist:

Code:

background-image: url(mein/bild.jpg);

es heißt auch target="_blank"
also mit einem _ vor dem blank
und gib bei den bildern am besten noch die größe mit an

height: 123px;
width: 321px;

hinzu kommt noch:

den style - tag musst du in in header schreiben und nicht im body bereich

Code:

<head>
<title>meine seite</title>
<style type="text/css">
.....
dein css
....
</style>
</head>
<body>
.....

kornyclown · 17.02.2009

AW: hilfe hover

Jazo schrieb:
Ich würde einfach dieses Script nehmen:

HTML:

<span onMouseOver="document.Bild.src='bildhover.gif'" onMouseOut="document.Bild.src='bildnormal.gif'"> <a href=""> <img src="bildnormal.gif" name="Bild" border="0"> </a> </span>

MFG
Jazo

funktioniert nicht

<span onMouseOver="document.Bild.src='pics/projektagentur2.jpg'" onMouseOut="document.Bild.src='pics/projektagentur1.jpg'">
<a href="http://www.Projektagentur-Berlin.de" target="_blank" ><img src="pics/projektagentur1.jpg"/></a></span>

Jazo · 18.02.2009

AW: hilfe hover

hmm also bei mir gings???

werds aber nochmal Testen

ruke · 23.04.2009

AW: hilfe hover

Ganz blöde Frage:
Bewirkt das "document" eigentlich, dass es nur die Bilder mit entsprechender id beim Drüberrollen verändert die in der GLEICHEN html-datei sind?

Weil ich ein Frameset hab und das onmouseover nicht über die Ränder meines iFrames funktioniert. Muss ich da anstatt "document" was andres hinschreiben?

Wär nett wenn mich einer hier kurz aufklären könnte

Vielen dank schonmal!

grüße
ruke

cebito · 23.04.2009

AW: hilfe hover

ruke schrieb:
Ganz blöde Frage:
Bewirkt das "document" eigentlich, dass es nur die Bilder mit entsprechender id beim Drüberrollen verändert die in der GLEICHEN html-datei sind?

Weil ich ein Frameset hab und das onmouseover nicht über die Ränder meines iFrames funktioniert. Muss ich da anstatt "document" was andres hinschreiben?

Wär nett wenn mich einer hier kurz aufklären könnte

Vielen dank schonmal!

grüße
ruke

Die angezeigte Seite im iframe ist ein eigenständiges (html)Dokument. Wenn du möchtest, dass da auch was passiert musst du selbigen code in ihm notieren.
... hoffe, ich hab dich richtig verstanden...

ruke · 23.04.2009

AW: hilfe hover

He, danke schonmal!

Ich glaub du hast mich aber ein bisschen falsch verstanden.
Denn ich möchte quasi genau das Gegenteil

Und zwar das ich, wenn ich IM frame über ein bildchen mit der maus fahr, sich AUSSERHALB des frames ein bild verändert.
Hab mich gefragt ob das an dem wörtchen "document" liegen kann... oder wie mach ich das sonst?

grüße!
ruke

Doitsu · 23.04.2009

AW: hilfe hover

das muesste im IFrame stehen:

Code:

<span
   onMouseOver="parent.getElementById('mypic').src='bildhover.gif'"
   onMouseOut="parent.getElementById('mypic').src='bildnormal.gif'">
hier mit maus rueber
</span>

und das dann ausserhalb:

Code:

<img src="bildnormal.gif" alt="" id="mypic"/>

.. anhand des oberen Code. Is aber ungetestet, kA obs auch wirklich geht. :rolleyes:

Aber das was du da uns an Code gegeben hast, wuerde nie im Leben das erziehlen, was du vor hast?

Edit: Seh gerade, TE & der, der das wissen wollte, sind 2 verschiedene Personen ^-^

leohh · 24.04.2009

AW: hilfe hover

Ihr macht da immer so ein drama draus ...
Js ist ne schlechte Loesung .. das nur mal vorweg...

HTML:

#wrapper a.weiterleitung {
         display: block;  
         background: url('http://i42.tinypic.com/jkfty8.jpg') no-repeat top left; 
         width: 60px;
         height: 0; 
         padding-top: 60px; 
         /* text-indent: -999em; */
      }
      
      #wrapper a.weiterleitung:hover {
         background-position: left bottom;
      }
         
      </style>
      
   </head>
   <body>
   
      <div id="wrapper">
  
         <a class="weiterleitung" href="http://www.Projektagentur-Berlin.de" target="_blank">Bilder der Projectagentur</a>
         
      </div>

Da Anker-Elemente standardmaessig inline-elemente sind, bastelt man sie sich um zu Block-Elemnten
Das Bild an sich, sollte - will man http-requests einsparen - aus beiden Grafiken bestehen.
Hoehe und Breite ergeben sich aus den Einzelbildabmessungen.

Verwendet man die Mentode mit dem Padding, dann ist die Height auf 0 zu setzen und ein Padding zu vergeben, dass der Einzelbildhoehe entspricht. Verwendet man jedoch die Methode mit dem text-indent, ist bei der Hoehe die Einzelbildhoehe einzutragen.

Beim hovern triggert man jetzt anstatt ueber top left, left bottom - womit durch die Dimension des Bildes ein sauberer Uebergang gewaehrleistet wird. Auch spart man sich preload Luecken, die es bei der javaversion immer wieder mal gibt.

Hier hab ich dann mal die Dimensionen und das Bild stehen lassen, damit man es auch gleich ausprobieren kann :rolleye: