kostenloser Webspace werbefrei: lima-city


HTML - onmouseover/out Bilder

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    zettel

    zettel hat kostenlosen Webspace.

    Guten Abend liebe lima Community,

    Ich will auf meiner Webseite Grafiken auswechseln, wenn die tag/maus">Maus drauf geht bzw. wieder runtergeht, jedoch sollen diese trotzdem ihren link beibehalten, also bei klick sollen sie noch genauso funktionieren...

    <a align="left" href="hauptseite.php" target="main"><img src="hauptseite-normal.png"  alt="Hauptseite" border=0> </a><br>
    <a align="left" href="chat.html" target="main"><img src=]"Chat-normal.png"  alt="Chat" border=0> </a><br>
    <a align="left" href="register.html" target="main"><img src="Register-normal.png" alt="Register" border=0> </a><br>
    <a align="left" href="userpanel.html" target="main"><img src="UserPanel-normal.png" alt="User Panel" border=0> </a><br> 
    <a align="left" href="howto.html" target="main"><img src="HowTo-normal.png" alt="How To" border=0> </a><br>
    <a align="left" href="voteforus.html" target="main"><img src="VoteforUs-normal.png" alt="Vote for Us" border=0> </a><br>
    <a align="left" href="http://fly-for-death.forumieren.eu/" target="_blank"><img src="Forum.png" alt="Forum" border=0> </a>


    Die Bilder (XXX-normal.png) sollen wenn die Maus drüber geht einfach durch das Bild XXX-Maus.png ersetzt werden.

    Ich habe ziemlich viele Varianten die Google ausspuckt ausprobiert entweder hats nicht funktioniert, oder der link ging nichtmehr...
    Wie das ganze gemacht wird ist egal, ob mit CSS oder mit Javascript oder, oder, oder...

    Ich wäre erfreut wenn mir jemand hier den Code poten könnte wie ich das machen muss...

    danke

    grüße
    Zettel

    Beitrag zuletzt geändert: 13.7.2010 17:59:15 von zettel
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. zettel schrieb:

    Ich wäre erfreut wenn mir jemand hier den Code poten könnte wie ich das machen muss...

    danke

    grüße
    Zettel


    schau Dir mal diese Seite an.
    Das hier wäre das Beispiel, was dabei herauskommt...

    p.s.
    Falsches Forum für das Thema.
    lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript wäre das Richtige Forum
  4. Autor dieses Themas

    zettel

    zettel hat kostenlosen Webspace.

    simuliertes schrieb:
    zettel schrieb:

    Ich wäre erfreut wenn mir jemand hier den Code poten könnte wie ich das machen muss...

    danke

    grüße
    Zettel


    schau Dir mal diese Seite an.
    Das hier wäre das Beispiel, was dabei herauskommt...

    p.s.
    Falsches Forum für das Thema.
    lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript wäre das Richtige Forum



    erstmal danke für deine antwort, das habe ich versucht, jedoch funktioniert dann der link nichtmehr, weil ich im Style Tag kein " href="...." " haben kann...

    Ach mist, das Forum habe ich gesucht... :-(
    kann man das vllt. dahin verschieben?
    danke

    grüße
    Zettel
  5. zettel schrieb:


    erstmal danke für deine antwort, das habe ich versucht, jedoch funktioniert dann der link nichtmehr, weil ich im Style Tag kein " href="...." " haben kann...

    Ach mist, das Forum habe ich gesucht... :-(
    kann man das vllt. dahin verschieben?
    danke

    grüße
    Zettel


    Das Verweisziel schreibst Du nach wie vor immer noch in html.
    also in dem Beispiel von mir (von selfhtml)
    statt:
    <p><a href="#">&nbsp;</a></p>

    das hier:
    <p><a href="hiersollshingehen.html">&nbsp;</a></p>


    Lies Dir am besten in ruhe die Erklärungen dazu auf der Seite von selfhtml durch.
    Das verschieben wird, hoffe ich, irgendwann ein Administrator für Dich übernehmen. Aber jetzt weißt Du ja wo Du Deine zukünftigen Fragen posten kannst...



  6. Autor dieses Themas

    zettel

    zettel hat kostenlosen Webspace.

    danke für die Antwort, ich kanns leider gerade nicht testen, aber sage dir morgen bescheid obs geklappt hat ;-9

    grüße
    Zettel

    edit: nein es funktioniert nciht, ich habs gerade ausprobiert...
    kann mir vllt. eienr sagen wie das mti javascript funktioniert? am besten gleich am beispiel oben :D

    Beitrag zuletzt geändert: 15.7.2010 16:29:35 von zettel
  7. zettel schrieb:
    edit: nein es funktioniert nciht, ich habs gerade ausprobiert...
    kann mir vllt. eienr sagen wie das mti javascript funktioniert? am besten gleich am beispiel oben :D



    Zettel im seltensten fall schreibt Dir hier jemand eine Lösung die Du 1:1 übernehmen kannst.
    Wenn Du Firefox benutzt ,kannst Du zB unter extras die Fehlerkonsole öffnen um rauszufinden woran es liegt.
    Was funktioniert denn nicht? Hast Du einen Link zu der Seite , das man sehen kann was Du versucht hast?

    Von javascript raten eigentlich alle immer ab es anzuwenden , wenn es auch ohne geht.
    Und das tut es...

    probiere also mal das hier:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
     <style>
       a.button1      { display:block;
                 background-image:url(http://www.lima-city.de/images/layout/icons/emoticon_smile.png);
                 width:120px; height:30px }
       a.button1:hover { background-image:url(http://www.lima-city.de/images/layout/icons/amazon.png); }
       a.button2      { display:block;
                 background-image:url(http://www.lima-city.de/images/layout/icons/calculator.png);
                 width:120px; height:30px }
       a.button2:hover { background-image:url(http://www.lima-city.de/images/layout/icons/page_white_code_red.png); }
     </style>
    </head>
    <body>
    <a class="button1" href="http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a4" >&nbsp;</a>
    <a class="button2" href="http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a4" >&nbsp;</a>
    </body>
    </html>


    Natürlich musst Du noch die Bildadresse, die Bildhöhe und -breite, sowie die Linkadresse anpassen.
    (und guck mal nach der css eigenschafft background-repeat )

    edit:
    hier noch ein paar, links auf die schnelle...
    http://www.google.de/search?q=omouseover+button+&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:de:official&client=firefox-a
    http://www.on-mouseover.de/script1.htm
    http://www.on-mouseover.de/css.html

    Beitrag zuletzt geändert: 15.7.2010 19:48:33 von simuliertes
  8. Ich hätte auch noch was :



    <a align="left" href="chat.html" target="main"><img src="Pfad zum normalen Bild ohne moueseover" onmouseover="this.src = 'Pfad zum Bild welches als mouseover dient'" onmouseout="this.src = 'Pfad zum Bild welches als mouseout dient-also das normale Bild wieder, wie ganz am Anfang'" width="Breite (z.B. 250)" height="Höhe (z.B.100)" alt="Chat" border=0> </a><br>
  9. Autor dieses Themas

    zettel

    zettel hat kostenlosen Webspace.

    metalstars schrieb:
    Ich hätte auch noch was :



    <a align="left" href="chat.html" target="main"><img src="Pfad zum normalen Bild ohne moueseover" onmouseover="this.src = 'Pfad zum Bild welches als mouseover dient'" onmouseout="this.src = 'Pfad zum Bild welches als mouseout dient-also das normale Bild wieder, wie ganz am Anfang'" width="Breite (z.B. 250)" height="Höhe (z.B.100)" alt="Chat" border=0> </a><br>


    @simuliertes, hat funktioniert, danke :D
    @metalstars, danke das aht auch funktioniert :-)

    grüße
  10. Und hier das ganze nochmal ohne unschönes Bildernachladen ;)
  11. Autor dieses Themas

    zettel

    zettel hat kostenlosen Webspace.



    @simuliertes, hat leider dochnicht funktioniert, trotzdem danke :D
    @strange hat leider auch nicht funkltioniert, habe ge hört man kann css auch deaktivieren? könnt ihr mir vllt. sagen wie man überpfrüfen kann das das wirklich an ist?
    danke

    grpße




    Beitrag zuletzt geändert: 17.7.2010 19:20:01 von zettel
  12. In diesem Threat wurden alle üblichen Methoden gezeigt, Thema könnte eigentlich geschlossen werden.....

    simuliertes schrieb:

    Zettel im seltensten fall schreibt Dir hier jemand eine Lösung die Du 1:1 übernehmen kannst.
    Wenn Du Firefox benutzt ,kannst Du zB unter extras die Fehlerkonsole öffnen um rauszufinden woran es liegt.
    Was funktioniert denn nicht? Hast Du einen Link zu der Seite , das man sehen kann was Du versucht hast?

    Von javascript raten eigentlich alle immer ab es anzuwenden , wenn es auch ohne geht.
    Und das tut es...



    ansonsten, kein Kommentar mehr von meiner Seite her...

    Beitrag zuletzt geändert: 17.7.2010 19:42:56 von simuliertes
  13. Autor dieses Themas

    zettel

    zettel hat kostenlosen Webspace.

    simuliertes schrieb:
    In diesem Threat wurden alle üblichen Methoden gezeigt, Thema könnte eigentlich geschlossen werden.....

    simuliertes schrieb:

    Zettel im seltensten fall schreibt Dir hier jemand eine Lösung die Du 1:1 übernehmen kannst.
    Wenn Du Firefox benutzt ,kannst Du zB unter extras die Fehlerkonsole öffnen um rauszufinden woran es liegt.
    Was funktioniert denn nicht? Hast Du einen Link zu der Seite , das man sehen kann was Du versucht hast?

    Von javascript raten eigentlich alle immer ab es anzuwenden , wenn es auch ohne geht.
    Und das tut es...



    ansonsten, kein Kommentar mehr von meiner Seite her...


    Ich habe ja auch gesagt, das es mit der einen Methode funktioniert, jedoch meinte jemand danach ja, das es anders besser wäre, weil man die ladezeiten umgeht...
    und das da oben habe ich wohl überlesen, tud mir leid... Meine Fehlerkonsole bei Firefox ist leer...
    Ein link zur seite: http://zettel.lima-city.de/

    Der Relevante Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
       "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
    <style>
    a.button1      { display:block;
                 background-image:url(hauptseite-normal.png);
                 width:120px; height:30px }
    a.button1:hover { background-image:url(hauptseite-maus.png); }
    </style>
    
    <link href="link+backgroundcolor.css" rel="stylesheet" type="text/css">
    
    </head>
    <title>Fly For Death v15!</title>
    <body>
    
    <a class="button1" name="hauptseite" align="left" href="hauptseite2.php"   target="main"><img src="hauptseite-normal.png"alt="Hauptseite"        border=0> </a><br>


    (bei den anderen feldern ist es nicht eingebaut...)
    Leider passiert aber einfach garnichts...

    danke

    grüße
  14. Na das ist ja schon einmal ein anfang....
    Habe mir die mühe gemacht auf Deine Webseite zu gucken.
    über die verwendung von Frames sag ich mal nix.
    also diese Seite:
    http://zettel.lima-city.de/navi.html
    Jetzt nimm doch einfach mal den <img>-Tags bei der "Hauptseite" raus .
    Erklärung:
    im stylesheet wird ein Hintergrundbild erstellt, wenn vor dem Hintergrundbild allerdings ein anderes Bild ist (<img>) kann man natürlich das Hintergrundbild nicht sehen.
    außerdem müssen die Werte width: und height exakt der Größe des Bildes entsprechen(!)

    Wie gesagt, wäre ein zusätzlicher Link auch schön gewesen, das hätte einige mühe von Anfang an erspart

    edit: Bitte gib Dir ein bisschen mühe und versuch auch selber ein bischen statt gleich zu sagen "es geht nicht" .
    Benutze Deine englischkenntnisse, was könnte wohl background-image, witdh, height bedeuten?. google nach den befehlen und versuche sie irgendwie zu verstehen (zB nach "css hover, css height usw).
    Wir können Dir immer nur Hilfestellungen geben, verstehen solltest Du es wenigstens ansatzweise aber auch um es gut umzusetzen

    Beitrag zuletzt geändert: 17.7.2010 21:25:53 von simuliertes
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!