• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hovereffekt bei Bildern !

  • Ersteller Ersteller xXRoggieXx
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
meise, sie unterstützen dich nicht. Unterstützen tun die dich, wenn du 1. Kontakt mit denen hast 2. die dir bewusst helfen (nicht mit einer seite, die für alle da ist) 3. wenn sie dir bei der seite helfen
 
Zurück zum Thema

Code:


/* Normales Bild */


/* Verblasstes Bild */



Code:


/* Als erstes wird das Bild mit verblasstem Effekt dargestellt und beim MouseOver wird das Bild normal dargestellt */
Zum Vergrößern anklicken....


zurück zum Thema:

erklärt mal für Dummis bitte: muss ich dieses "img scr" zur Aufzählung verwenden wenn ich mehrere Bilder habe? Wenn ja: wie?
Mein Problem: das verträgt sich nicht mit meinen Buttons
 
Natuerlich unterstuetzen die dich damit *kopf schuettel*
ich hab auf allen meinen homepages "powered by php" und "powered by mysql" buttons auf php.net und mysql.com verlinkt ;) und glaube mir: ich hab noch nie mit einem mysql entwickler geredet :mrgreen:
 
und javascript geht auch nicht immer
(ich surfe meistens mit javascript aus)
 
ja *rechtgeb*
ich hab nur irgendwo bei php oder mysql dazu mal was gesehen nur eben nicht gefunden ;_(
 
Sorry hat jetzt nix mim Topic zu tun, aber ich kann mir die Frage nich verkneifen :oops:

Wenn ihr euch die seite http://www.xxroggiexx.de.vu/ (also die seite vom xXXRoggieXXx) anschaut, und zwar im IE! Wenn man unten mit der Maus über "HP:....." drüber fährt dann blinkt diese schrift (mouseover) ja leicht auf.
Kennt einer den Code für das Teil, sodass es auch im FireFox funktioniert ^^ :mrgreen:
 
das liegt dadran das er reine internet explorer technologien verwendet. back to topic

fügr folgende attribute in das bild ein: OnMouseOver="this.src='alternativ_bild.jpg';" OnMouseOut="this.src='normales_bild.jpg';"
 
Darf ich der Vollständigkeit halber noch die CSS-Variante aufzeigen? (Wir sind ja im CSS Forum...)

In den <head>
Code: 
<style type="text/css">
#bild1 {background-image:url(pfad/bild.jpeg);
width:100px; height:53px;}

#bild1:hover {background-image:url(pfad/hoverbild.jpeg);}
</style>

In den <body>
Code: 
<div id="bild1"></div>

Dann muss man nur noch die Grössenangaben anpassen und schon gehts. (Allerdings wieder mal nicht im IE! :evil: )
 

Also muss ich für die Variante von Prophet die Bilder selber kurz mit "Nebel" versehen? Tut's eigentlich auch *thx*
Für die Variante war ich lediglich zu bequem, daher wollte ich den hier zu Beginn vorgeschlagenen Code verstehen. :wink:

Wenn ich bei mir in den Einstellungen Javasrcipt deaktiviere, ist dann meine Page mit den Buttons für'n A... ?
(Wenn ja dann gibt der Hinweis von Niklas echt zu denken)
 
NICHT JAVA SONDERN JAVASCRIPT!!!!!!

und ja wenn du js deaktivierst dann funktioniert das ganz nicht mehr....
 
So viel bla und nur luft ;)

hier koennt ihr euch mal ne demo ansehen die genau das macht was du so sehnlichst erwartest und zwar IE, FF und Netscape tauglich!

1) Erste Demo ist ein img scroller. Dort wird das Bild alle 5sec gewechselt
2) Fuer das faden (ein und ausblenden der bilder) auf "Bilder anzeigen" klicken. Aufmerksam hinsehen. bereits bei der oeffnung des popups wird das bild eingeblendet. wenn ihr jetzt auf rating klickt wird das bild dunkler. bei einem zweiten klick wieder heller.

ps: ist nur ne techdemo! also keine optik kritik bitte 8)

www.paob.de/fx
 
@Prophet

wie soll ich das verstehen? :shock: bedeutet ja shock? ich will keinem zu nahe treten und schon garnicht erschrecken :)
 
ich wunderte mich nur etwas von dir zu hören... seit monaten hört man nichts von den admins und dann tauchen sie plötzlich weder auf auch feliks ist wieder web...
 

Und wenn jetzt noch erkennbar wär die das funzt mit dem Verdunkeln der Bilder...
Sag mal ist das Absicht, dass das steht 1/48 Bildern und man trotzdem nicht auf Bild No 2 kommt? :wink:
 
als erstes das script hier auf deine platte speichern (rechts klick -> speichern unter)
JSFX Imagefader

dann in deine seite einbauen wo das mit dem faden passieren soll
Code: 
<script src="jsfx_imagefader.js" type="text/javascript"></script>

dann die bilder deiner wahl nehmen und das <img> tag so anlegen
Code: 
<img src="1.jpg" class="imageFader" onMouseOver="JSFX.fadeUp(this)"

ach ja, damit der effekt auch geil aussieht, musst du ihn auf dunklem hintergrund machen, da diese funktion das alpha blending veraendert, also es nicht dunkler sondern durchsichtiger macht. somit wuerde das bild auf weissen hintergrund blasser werden.

viel spass
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben