Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Mouseover-> Andres Bild“

ruke

Kleingrafiker

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
 
G

-GS-Master

Guest

Fällt genau gesagt unter Code, haste recht.
Das kannste mit JavaScript oder CSS erreichen -.-
Würd es aber mit CSS realisieren ^^
 
G

-GS-Master

Guest

Sieht dann so aus

In etwa so was meinst du oder ?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Rollover mit CSS - Beispiel 5</title>
 <style>
   a       { display:block;
             background-image:url('button.gif');
             width:120px; height:30px }
   a:hover { background-image:url('button_on.gif'); }
 </style>
</head>
<body>
  <h1>Bild-Button mit CSS</h1>
  

[url="#"]&[/url]</p>
</body>
</html>
 

NicoB

Hat es drauf

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

kleinerVampir

Aktives Mitglied

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';">

</a>
[/php:1:490b53f004]
 
T

taigawolf

Guest

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:
<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
 <HEAD>
  <META NAME="author" CONTENT="">
  <META NAME="description" CONTENT="Vorschau mit eventhandler       onMouseover">
  <META NAME="keywords" CONTENT="Javascript, eventhandler,          onMouseover">
  <META NAME="date" CONTENT="19.11.2006">
  
  <TITLE>Vorschau mit OnMouseover</TITLE>
  
  <SCRIPT LANGUAGE="Javascript" TYPE="text/javascript">
  <!--
   function vorschau(index, button) {
   
   window.document.images[index].src=button.src;
      
   }

   css1= new Image();
   css1.src= "CSS_Proklein.jpg"; 
   css2= new Image();
   css2.src= "CSS_Progroß.jpg";
   
   //-->
  </SCRIPT>
 </HEAD>
 <BODY BGCOLOR="#">
  [img]CSS_Proklein.jpg[/img]
 </BODY>
</HTML>
 
M

Marylou

Guest

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
 
C

capiana

Guest

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';">
</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
 
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

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben