Mouse Over in HTML

Nemme · 06.06.2009

Hallihallo,

ich hätte gerne, dass sich ein button ändert, wenn man mit der Maus darüber fährt, bin aber noch nicht wirklich fündig geworden auf diversen HTML Homepages. Kann mir einer helfen?

Danke!

DrBeppi · 06.06.2009

AW: Mouse Over in HTML

Hey kannst ja mal gucken ob dir das hilft.
lg DrBeppi

HTML Basix - Mouseover images generator

TMP2k1 · 06.06.2009

AW: Mouse Over in HTML

So weit ich da richtig informiert bin, geht das nur per Javascript oder CSS.
Guck mal hier

stb_87 · 06.06.2009

AW: Mouse Over in HTML

Mach es mit CSS, ist viel schöner und flexibler und vorallem einfacher

:hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

leohh · 06.06.2009

AW: Mouse Over in HTML

Am besten gewoehnst du dir gleich die CSS-Variante an.
Du nimmst dir ein Bild her, dass im Optimalfall sowohl den normal als auch den hover -bzw. alle anderen Stati ein einem Bild vereinigt und dann mittels background-position hin und her verschiebst. Am besten du suchst auch hier im Board einfach nach Rollover-Menues mittels CSS, dann wirst du fuendig werden. Von der Javascriptvariante ist nur abzuraten.

sloshed · 06.06.2009

AW: Mouse Over in HTML

Hi,

Ob mit CSS oder Javascript, beide Lösungen sind ok und können einfach realisiert werden.

Mit CSS machst du das z.b. in der Form eines Hintergrundes.

z.B.

Code:

a { background-image: url(..deinbild.jpg) }
a:hover { background-image: url(..deinbild2.jpg) }

Es gibt viele Varianten das mit CSS zu realisieren.

Mit Javascript kann man das z.B. so machen:

Code:

<div id="bla">
<img src="bild1.jpg" onmouseover="this.src='bild2.jpg'"
onmouseout="this.src='bild1.jpg'" />
</div>

Das wären die einfachsten Varianten. Aber nicht die Browsersichersten!

Grüße

stiller47 · 06.06.2009

AW: Mouse Over in HTML

Die eleganteste Lösung ist CSS mit Preload. Hier legst du deine Hintergrund-Grafik deines Buttons so an, dass das inaktive und aktive Bild als ein Bild nebeneiander oder übereinander liegen.

Beim Hover verschiebst du nun die Grafik.

Auf diese Weise entfällt das Flimmern beim durchlaufen des Menüs, das durch den Nachladevorgang des Hover-Bildes hervorgerufen wird

sloshed · 06.06.2009

AW: Mouse Over in HTML

Genau, auch eine Elegante einfache Lösung.

Wenn du diese verwendest musst du die Position des Hintergrundes angeben.

z.B.

Code:

a { background-image: url(..deinbild.jpg) 0px 0px }
a:hover { background-image: url(..deinbild2.jpg) 5px 0px }

Hier verschiebst du die Grafik Horizontal um 5px beim Hover. Hierbei solltest du auch auf den überlaf der Grafik achten. Wenn du diese Methode anwendest ist eine grafik gößer als das Element. Somit wirst du auch mit "overflow: hidden;" arbeiten müssen.

Nemme · 06.06.2009

AW: Mouse Over in HTML

zurzeit sieht der button nur so aus (einer der vielen):

<a href="eksempel.html" target="_self">
<img src="Bilder/link_eksempel.png" width="141" height="60" border="0" alt=""></a>

also muss das dann zum beispiel so aussehen:

<a href="eksempel.html" target="_self">
a { background-image: Bilder/link_eksempel.png }
a:hover { background-image: Bilder/link_eksempel_acc.png }
</a>

wieso muss überhaupt nochmal die größe definiert werden von dem button?

stb_87 · 06.06.2009

AW: Mouse Over in HTML

Nemme schrieb:
also muss das dann zum beispiel so aussehen:

<a href="eksempel.html" target="_self">
a { background-image: Bilder/link_eksempel.png }
a:hover { background-image: Bilder/link_eksempel_acc.png }
</a>

WOW :'

'(

Kennst du dich überhaupt mit CSS aus?!

Das CSS gehört in eine ausgelagerte Datei, nennen wir sie mal style.css.
Diese style.css bindest du über <link type="text/css" rel="style.css"> zwischen <head> und </head> in deinem Quelltext ein.

Schau dir am besten noch mal den Link an, den ich dir gepostet habe. Da wird alles ausführlich und verständlich erklärt...

Nemme · 06.06.2009

AW: Mouse Over in HTML

nee ich hab davon garkeine Ahnung...

.. ich mach erst seit 3 tagen mit html rum un nu schon css können? so schnell gehts ned ^^

also bleibt alles wie gehabt und ich trage nur in den head ein:

a { background-image: url(..deinbild.jpg) }
a:hover { background-image: url(..deinbild2.jpg) }

sloshed · 06.06.2009

AW: Mouse Over in HTML

Hier mal ein Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#navigation a {
    background-image: url(images/deinbild.jpg)
}
#navigation a:hover{
    background-image: url(images/deinbild2.jpg)
}
-->
</style>
</head>

<body>
<div id="navigation"> 
    <a href="#">Navigation</a> 
    <a href="#">Navigation</a>
</div>
</body>
</html>

mit "#navigation a " legst du den Style des "a" Tags im Div-Container "navigation" fest.

Das ist nur ein Beispiel und keine schöne Lösung.
Lese dir wie von stb_87 geschrieben nochmals alles durch. Das ganze ist einfacher als es ausschaut

Grüße

Nemme · 06.06.2009

AW: Mouse Over in HTML

also einfach für jeden Button vorher a und a:hover definieren im style bereich.. ich versuch mal bissel ... danke!

Edit:

hier mal der HTML-Code bis zu dem Button den ich mal versuchen wollt mit mouseover:

Code:

<html>
<head>
<title>Helleren Snekkeri</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Tobias Bengs">
<meta http-equiv="content-language" content="no">
<meta name="robots" content="index"> 
<meta name="description" content="Helleren Snekkeri Grov">
<meta name="keywords" content="snekker, skanland, grov, helleren, snekkeri, kjokke, mobler, bad, restauering, dorer, Grovfjord, Skånland, kjøkken, møbler, dører">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<style type="text/css">
#navigation a {
    background-image: url(Bilder/link_eksempel.png)
}
#navigation a:hover{
    background-image: url(Bilder/link_eksempel_acc.png)
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tabelle_01" width="1000" height="1000" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td rowspan="5">
            <img src="Bilder/abstand_links.png" width="12" height="1000" alt=""></td>
        <td colspan="7">
            <img src="Bilder/abstand_oben.png" width="988" height="25" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="Bilder/header.jpg" width="850" height="177" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/head_schreiner.png" width="138" height="295" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="index.html" target="_self"
                onmouseover="window.status='http://www.helleren-snekkeri.no';  return true;"
                onmouseout="window.status='';  return true;">
                <img src="Bilder/link_home_acc.png" width="142" height="60" border="0" alt=""></a></td>
<div id="navigation"> 
        <td>
            <a href="eksempel.html" target="_self">
                <img src="Bilder/link_eksempel.png" width="141" height="60" border="0" alt=""></a></td>
</div>

scheint aber ned so zu gehen ^^... muss ich doch lesen... mist

sloshed · 06.06.2009

AW: Mouse Over in HTML

Hey!

Ich würde dir auch raten erst mal alles zu lesen.
Es fehlt auch der Documenttype bei dir,leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ist altmodisch und kannst du durch "margin:0px;" erstetzen.
Dann weg vom Tabellendesign!!!

Mache alles schön in Div Container. Tabellen tragen nicht gerade bei der Ladezeit der Website bei und haben auch andere Nachteile.
Auch wenn man mit Tabellen als Anfänger vieleicht besser zurecht kommt als mit Div´s die via CSS positioniert werden, ist diese Variante nicht gerade die schöne Art des Webdesigns

Es gibt massig Tutorials für CSS. Lesen, lernen und danach Freude am Coden haben

Benutzte nur noch Tabellen für tabellarische Darstellungen.

Grüße

xyzutschixyz · 09.06.2009

AW: Mouse Over in HTML

@slosehead
wie er die Seite aufbaut ist hier nicht relevant.

Doch jetzt zum eigentlichen Thema
Dein bisheriger css Code sieht gar nicht so schlecht aus, aber du verwendest Navigation darin. Nur gibt es nirgendwo ein bild, dass die id Navigation hat. Deshalb in dein bild id="" einfügen