Anzeige

Mouseover-> Andres Bild

Mouseover-> Andres Bild | PSD-Tutorials.de

Erstellt von ruke, 05.01.2007.

  1. ruke

    ruke Kleingrafiker

    Dabei seit:
    16.11.2006
    Beiträge:
    151
    Geschlecht:
    männlich
    Ort:
    W-Dorf
    Software:
    Photoshop CS3, Freehand, Illustrator, seit neustem auch Dreamweaver
    Mouseover-> Andres Bild
    Hey PSDler,

    ich weiß nich ob das schon unter "Code-Fragen" fällt.
    Wenn das der Fall ist, dann könnt ihr den Thread gern wieder
    löschen.

    Ich hab da nämlich ne Frage:
    Ich hab da ein Bild in meiner Homepage, und hab das
    verlinkt.
    Jetz hätte ich gern, das beim Drüberfahren ein andres Bild
    erscheint. ( Das heißt Farbe ändert sich, etc.)

    Es kann mir bestimmt jemand von euch Profis helfen oder? :razz:
    Vielen Dank schonmal!

    Grüße,
    Ruke
     
    #1      
  2. -GS-Master

    -GS-Master Guest

    Mouseover-> Andres Bild
    Fällt genau gesagt unter Code, haste recht.
    Das kannste mit JavaScript oder CSS erreichen -.-
    Würd es aber mit CSS realisieren ^^
     
    #2      
  3. -GS-Master

    -GS-Master Guest

    Mouseover-> Andres Bild
    Sieht dann so aus

    In etwa so was meinst du oder ?

    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    2. <html>
    3. <head>
    4.  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    5.  <title>Rollover mit CSS - Beispiel 5</title>
    6.  <style>
    7.    a       { display:block;
    8.              background-image:url('button.gif');
    9.              width:120px; height:30px }
    10.    a:hover { background-image:url('button_on.gif'); }
    11.  </style>
    12. </head>
    13. <body>
    14.   <h1>Bild-Button mit CSS</h1>
    15.  
    16.  
    17. [url="#"]&[/url]</p>
    18. </body>
    19. </html>
     
    #3      
  4. NicoB

    NicoB Hat es drauf

    Dabei seit:
    22.07.2005
    Beiträge:
    3.491
    Geschlecht:
    weiblich
    Mouseover-> Andres Bild
    Du weißt doch scheinbar wie es heißt, also warum googelst du nicht einfach nach "Mouseover HTML" o.ä

    Du kannst es mit JavaScript oder CSS lösen, wobei CSS deutlich zeitgemäßer und w3-konformer ist.

    edit:
    Ah, -GS-Master hat ja schon eine CSS-Möglichkeit gepostet. Da war ich wohl zu spät :?
     
    #4      
  5. Missi

    Missi gespeert

    Dabei seit:
    18.05.2005
    Beiträge:
    2.142
    Geschlecht:
    weiblich
    Mouseover-> Andres Bild
    verschoben nach HTML+CSS
     
    #5      
  6. kleinerVampir

    kleinerVampir Aktives Mitglied

    1
    Dabei seit:
    28.01.2006
    Beiträge:
    1.465
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Photoshop CS5 | Notepad++
    Kameratyp:
    CANON EOS350D
    Mouseover-> Andres Bild
    Der Vollständigkeit halber hier noch die Javascript Lösung

    [php:1:490b53f004]
    <a href="blabla.htm" onMouseOver="document.Bild.src='Maus-drauf.jpg';" OnMouseOut="document.Bild.src='Maus-weg.jpg';">
    [​IMG]
    </a>
    [/php:1:490b53f004]
     
    #6      
  7. erti

    erti Blabubb

    Dabei seit:
    24.07.2006
    Beiträge:
    221
    Geschlecht:
    männlich
    Mouseover-> Andres Bild
    Obwohl ich an deiner Stelle sicher die Css-Lösung bevorzugen würde!
    Javscript ist schon sooo out! 8)
    *gg
     
    #7      
  8. ruke

    ruke Kleingrafiker

    Dabei seit:
    16.11.2006
    Beiträge:
    151
    Geschlecht:
    männlich
    Ort:
    W-Dorf
    Software:
    Photoshop CS3, Freehand, Illustrator, seit neustem auch Dreamweaver
    Mouseover-> Andres Bild
    Ok ich werds mal ausprobieren!
    Vielen Dank euch allen! :!: :!:
     
    #8      
  9. taigawolf

    taigawolf Guest

    Mouseover-> Andres Bild
    zunächst brauchst du erstmal 2 bilder ich hatte ein kleines bild mit nem typen von Counterstrike und wennman mit der maus drübergeht dann wird er größer :]
    Ich hoffe ich muss das nicht erklären, is ja nur javascript :]
    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 TRANSITIONAL//EN">
    2. <HTML>
    3.  <HEAD>
    4.   <META NAME="author" CONTENT="">
    5.   <META NAME="description" CONTENT="Vorschau mit eventhandler       onMouseover">
    6.   <META NAME="keywords" CONTENT="Javascript, eventhandler,          onMouseover">
    7.   <META NAME="date" CONTENT="19.11.2006">
    8.  
    9.   <TITLE>Vorschau mit OnMouseover</TITLE>
    10.  
    11.   <SCRIPT LANGUAGE="Javascript" TYPE="text/javascript">
    12.   <!--
    13.    function vorschau(index, button) {
    14.    
    15.    window.document.images[index].src=button.src;
    16.      
    17.    }
    18.  
    19.    css1= new Image();
    20.    css1.src= "CSS_Proklein.jpg";
    21.    css2= new Image();
    22.    css2.src= "CSS_Progroß.jpg";
    23.    
    24.    //-->
    25.   </SCRIPT>
    26.  </HEAD>
    27.  <BODY BGCOLOR="#">
    28.   [img]CSS_Proklein.jpg[/img]
    29.  </BODY>
    30. </HTML>
     
    #9      
  10. David10

    David10 Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2006
    Beiträge:
    82
    Geschlecht:
    männlich
    Software:
    PS CS6
    Mouseover-> Andres Bild
    CSS is vl. die bessere Möglichkeit, aber "out" ist Javascript mit Sicherheit NICHT!
     
    #10      
  11. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Mouseover-> Andres Bild
    An der Stelle ist es schlicht falsch, das hat mit in und out nichts zu tun
     
    #11      
  12. Marylou

    Marylou Guest

    Mouseover-> Andres Bild
    wenns größere und viele bilder sind,

    is ausserdem zu empfehlen bei CSS ein sogenanntes HIDDENPIC zu verwenden

    eine class entwerfen die ein bild einfach nicht anzeigt.
    Das dann gaaaaanz unten in den Html code einbinden,
    auch bilder für die folgenden seiten
    das hat den effektiven vorteil das der browser die bilder läd
    und später wird das ganze flüssig angezeigt

    (bilder bleiben im cache)

    gruß Marie
     
    #12      
  13. Freak4ever

    Freak4ever Guest

    Mouseover-> Andres Bild
    Ist doch schon öfters besprochen worden oder?

    www.on-mouseover.de bespricht auch die Lösung mit CSS
     
    #13      
  14. capiana

    capiana Guest

    Mouseover-> Andres Bild
    hmm

    hallo mein vorschlag ist ein ganz einfacher, funktioniert bei IE und Firefox einwandfrei!

    Hier ein aussschnitt aus meiner page:

    Einfach zwei Grafiken erstellen:
    zb.: Termine0.gif und Termine1.gif

    einfach folgendes mitells include einfügen (muss nicht sein):


    <a href="termine.htm"onMouseOver="termine.src='../images/termine1.gif';
    "onMouseOut="termine.src='../images/termine0.gif';">
    [​IMG]</a>

    termine.htm --> deine seite die angezeigt weden soll wenn man auf den button klickt

    die erste zeile gibt den prozess an wenn man mit der maus auf den Button fährt und die zwiete Zeile gibt die Grafik an wenn man mit der Maus vom Button wegfährt....

    Die Dritte zeile gibt die Standartgrafik an, optional die erste grafik.

    mfg
    capiana
     
    #14      
x
×
×