Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „hilfe hover“

K

kornyclown

Guest

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

Nicht mehr ganz neu hier

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

Schmarotzer

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>
.....
 
Zuletzt bearbeitet:
K

kornyclown

Guest

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
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>
 

ruke

Kleingrafiker

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

undefined

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

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

Kleingrafiker

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

Aktives Mitglied

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 ^-^
 
Zuletzt bearbeitet:

leohh

CSS verliebt

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:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben