Mouseover-Effekt bei Bildern

D@3m0n!cu$

Hallo....

.... habe irgendwie kein passendes Forum gefunden, also erst ma ins Offtopic...

Zu meiner Frage. Ich habe mir ne Homepage gebaut, basierend auf HTML. Als Editor dafür nehme ich Frontpage (nicht lachen, komme damit nur gut klar). Jetzt habe ich per Stylesheet den Text-Hyperlinks beigebracht, daß sich Farbe und Größe beim Mouseover ändern. Ich hätte das ganze nun gerne auch mit Bildern. Also ein Bild als Hyperlink, und beim Mouseover erscheint ein anderes Bild. Leider bekomme ich das nicht hin, bzw. fehlt mir der Befehl dazu. Ich hoffe, einer von euch kann mir dabei helfen.

Falls gewünscht wird, kann ich auch mal gerne den Link für meine Page hier posten.

Dark Greetz
D@3m0n!cu$

*Christian*

Hi D@3m0n!cu$,

ich hab es mal ins richtige Forum verschoben.

Das ist per Javascript möglich hatte den Code auch mal, muss ich mal suchen bei mir auf der Platte.

Gruss
Christian.

*Christian*

Ich denke, ich hab was besseres gefunden schau mal hier!

http://home.arcor.de/struebig/js/mouse_over/index.html

http://www.web-toolbox.net/webtoolbo...rn-2images.htm

Gruss
Christian

D@3m0n!cu$

Hi Christian...

zuerst mal Danke für's Verschieben.... hab ich doch glatt das Topic übersehen... Asche auf mein Haupt :-)

Danke für die Links, sieht schon mal sehr vielversprechend aus..... Mal schauen, ob ich damit klar komme..... Vielen Dank!!

Dark Greetz
D@3m0n!cu$

*Christian*

So und dann kann ich dir auch noch einen ganz einfachen geben, den ich immer nutze!!

Fügen zwischen <head> und </head>

Code:

<script type="text/javascript">
<!--

//Uncomment the next line for random transition rollover each time the page is loaded
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=2, transition='+Math.floor(Math.random()*23)+') }</STYLE>');
//Uncomment the next line for a specific transition rollover (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0,transition=9) }</STYLE>');

//Uncomment the next line for fading rollovers
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=2) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
 onImages[imgName] = new Image();
 onImages[imgName].src = imgSrc;
}
function turnOn(imgName)
{
 if(document.images[imgName].filters != null)
  document.images[imgName].filters[0].stop();
 document.images[imgName].offSrc = document.images[imgName].src;
 document.images[imgName].src    = onImages[imgName].src;
}
function turnOff(imgName)
{
 if(document.images[imgName].filters != null)
  document.images[imgName].filters[0].apply();
 document.images[imgName].src = document.images[imgName].offSrc;
 if(document.images[imgName].filters != null)
  document.images[imgName].filters[0].play();
}
Rollover("home",    "dein Bild bei Mouseover.gif");

//-->
</script>

zwischen <body> und </body>

Code:

<a href="index.htm" onMouseOver="turnOn('home');"
 onMouseOut="turnOff('home');"><img name="home" class="imgTrans"
  src="dein Bild ohne Mouseover.gif" border="0"></a>

Gruss
Christian

D@3m0n!cu$ · *Last edited by D@3m0n!cu$ : 16.02.2004 at 21:51.*

Ahja.... ganz einfach..... muß wohl nur da eintragen, wo du rot markiert hast, ne? Sieht aber trotzdem kompliziert aus, zumal ich mit den ganzen Befehlen nichts anfangen kann.... naja, werde mich mal daran versuchen.....

Vielen Dank für deine Tips! Bist mir echt ne große Hilfe

Greetz
D@3m0n!cu$

*edit: Habe es eben mal getestet, funzt supi.... jetzt muß ich nur noch die Bilder machen und das Script in meine Page einbauen. Nochmal vielen Dank @ Christian!*

*edit2: Kann ich das auch für mehrere Bilder auf einer Seite anpassen? Denke mal schon, bei

Code:

Rollover("home",    "dein Bild bei Mouseover.gif");

Muß dann halt diverse "Rollover" definieren, also "home" (wie im Bsp.) und dann halt entsprechend à la "guestbook", "kontakt", etc... und im Body muß ich dann halt passend zum Link den richtigen Rollover ansprechen, stimmts?*

*Christian*

Genau, du hast die Lösung schon gefunden!

Gruss
Christian

D@3m0n!cu$

Quote:

Originally Posted by Christian


	Genau, du hast die Lösung schon gefunden! Gruss Christian

Ja, habe gestern schon etwas experimentiert mit dem Script..... muß jetzt halt noch die passenden Bilder basteln :-)......

Aber mal noch was anderes.... habe auf meiner Homepage auch eine Seite für Links, und da würde ich dein Board auch gerne reintun und verlinken, wenn du zustimmst. Ich brauche nur ein Banner/Logo und falls du willst auch einen Text, worum es in deinem Forum geht. Für weitere Infos, schick mir ne PN...

Dark Greetz
D@3m0n!cu$

r41d3r

danke sowas hab ich gesucht

nevarna-tema · *Last edited by nevarna-tema : 08.06.2009 at 10:04.*

Hallo ich habe eine Frage zu dem Code von Christian.
Ich habe es dank deinem Code nach zwei Tagen versuchen endlich geschafft, auf meiner homepage mehrere Bilder mit dem Mouseovereffekt zu belegen. Siehe (link entfernt von mir selbst) und dann auf den zweiten (untersten) Link Impressum klicken, um die Seite sehen zu können.
Nun habe ich ein Problem noch und zwar sollten meine Bilder eigentlich Links zu den Pages darunter sein, wo kann ich denen also den URL hinzufügen, dass wenn ich draufklicke, eine nächste Seite aufgerufen wird? Wenn ich jetzt drauf klicke, kommt nur Error 404.

Dann noch eine Frage, schaut euch bitte mal die page durch, mit dem passwort auf der startseite "favole" kommt ihr in die Ansicht. Und wenn ihr da die Adressenleiste anschaut, erkennt ihr, dass sich der URL nicht verändert, obwohl man eine neue Seite aufgreift. Das heisst ich könnte dann trotzdem meine Bilder nicht verlinken zu ihren Unterseiten, da diese selbst keine eigene Adresse haben??

Hier noch mein Code für den Mouseover, ich danke euch!

<head>
<script type="text/javascript">

</script> <head/>

<body>
<a href="index.htm" onMouseOver="turnOn('home');"
onMouseOut="turnOff('home');"><img name="home" class="imgTrans"
src="http://www.oyla9.de/userdaten/65837998/bilder/G_LN_01_Aktuell_2.gif" border="0"></a>

<a href="index.htm" onMouseOver="turnOn('setcard');"
onMouseOut="turnOff('setcard');"><img name="setcard" class="imgTrans"
src="http://www.oyla9.de/userdaten/65837998/bilder/G_LN_02_Setcard_2.gif" border="0"></a>

<a href="index.htm" onMouseOver="turnOn('galery');"
onMouseOut="turnOff('galery');"><img name="galery" class="imgTrans"
src="http://www.oyla9.de/userdaten/65837998/bilder/G_LN_03_Galery_2.gif" border="0"></a>

<a href="index.htm" onMouseOver="turnOn('works');"
onMouseOut="turnOff('works');"><img name="works" class="imgTrans"
src="http://www.oyla9.de/userdaten/65837998/bilder/G_LN_04_Works_2.gif" border="0"></a>

<a href="index.htm" onMouseOver="turnOn('links');"
onMouseOut="turnOff('links');"><img name="links" class="imgTrans"
src="http://www.oyla9.de/userdaten/65837998/bilder/G_LN_05_Links_2.gif" border="0"></a>

<a href="index.htm" onMouseOver="turnOn('contact');"
onMouseOut="turnOff('contact');"><img name="contact" class="imgTrans"
src="http://www.oyla9.de/userdaten/65837998/bilder/G_LN_06_Contact_2.gif" border="0"></a>

<body/>

nevarna-tema

hm jaja immer schön artig antwort geben *liebguck* hihi :-)

*Christian*

Wenn 404 kommt stimmt der Pfad nicht

nevarna-tema

ich weeis

meine frage is ja aber, wo ich denn in diesem code den pfad angeben kann?

jaichwill · *Last edited by jaichwill : 02.11.2010 at 13:27.*

hallo,danke für den code!