>> Mouse Hover mit Dreamweaver erstellen...

DeepShadow · 10. Dezember 2006

...ich weiß nicht ganz genau wo das hier hingehört...habs jetzt einfach mal hier reingepackt...

zu meiner frage:
Ich erstelle grade eine Homepage mit Dreamweaver. Jetzt habe ich ein Bild das ich verlinken möchte. Verlinken geht ja recht schnell und gut nur ich möchte das wenn man mit der maus über das bild geht...ein anderes bild erscheint...also ein mouse hover nennt man das glaub ich...

wie geht das mit Dreamweaver8... !?

mfg + thx
GIGAmast

Tankred · 10. Dezember 2006

Mit Dreamweaver hat das erstmal nichts zu tun. Ganz easy geht das mit HTML und CSS, wobei man per CSS angeben kann, was bei einem hover passiert:

Code:

selector:hover
{
background-image: irgendwas.jpg
}

Tankred · 10. Dezember 2006

Hier habe ich Dir mal ein Beispiel angefertigt:

http://tankred.ta.funpic.de/

DeepShadow · 10. Dezember 2006

...irgendwie check ich das alles nicht...kannst du das nochmal für dumme erklären !?

also ich hab jetzt dreamweaver vor mir...wie kann ich das denn da jetzt machen ?

Tankred · 10. Dezember 2006

1. Du gehst in die Codeansicht
2. Dort kopierst Du folgendes rein und überschreibst dabei mal alles vorhandene:

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>Einfach ein Test</title>
<style type="text/css">
.bild
{
background-image:url(on.gif);
width:80px;height:80px;
border:1px solid red;
}
.bild:hover
{
background-image:url(off.gif);
width:80px;height:80px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="bild"></div>
</body>
</html>

3. Dann erstellst Du einen Ordner "Hover" auf der Festplatte und speicherst diese Seite darin ab
4. Du erstellt zwei Dateien mit den Namen "on.gif" und "off.gif" und speicherst sie ebenfalls in dem Ordner "Hover" ab
5. Dann klickst Du in Dreamweaver auf "Vorschau in..." und die Seite sollte funktionieren

DeepShadow · 10. Dezember 2006

k werd ich mal eben ausprobieren....

Sir_Sascha · 10. Dezember 2006

schau hier ich hab für dich mal nen Screenshot gemacht. Vielleicht hilft dir das.

DeepShadow · 10. Dezember 2006

k bis jetzt funzt es...nurnoch zwei fragen:

1) wie kann ich das dingen jetzt in meine page einfügen ?
2) wie kann ich auf das teil, wenns auf meiner page ist, einen link drauf setzen ?

DeepShadow · 10. Dezember 2006

Zitat von Sir_Sascha:
schau hier ich hab für dich mal nen Screenshot gemacht. Vielleicht hilft dir das.

jo genau sowas wollt ich haben...vielen dank !

Tankred · 10. Dezember 2006

Diese Lösung würde ich nicht empfehlen, denn sie resultiert in einem recht komplexen JavaScript, das erstens nicht bei jedem Besucher funktionieren wird und zweitens viel zu viel Code für so ein büschen Bildwechseln ist. Zudem ist es kaum als barrierefrei zu bezeichnen. Aber okay, prinzipiell geht es so auch.

DeepShadow · 10. Dezember 2006

Zitat von Tankred:
Diese Lösung würde ich nicht empfehlen, denn sie resultiert in einem recht komplexen JavaScript, das erstens nicht bei jedem Besucher funktionieren wird und zweitens viel zu viel Code für so ein büschen Bildwechseln ist. Zudem ist es kaum als barrierefrei zu bezeichnen. Aber okay, prinzipiell geht es so auch.

trotzdem auch vielen dank an dich...das du dir soviel mühe gegeben hast....

Sir_Sascha · 10. Dezember 2006

Viel Bitte...

Suche

>> Mouse Hover mit Dreamweaver erstellen...

DeepShadow

Lt. Junior Grade

Tankred

Gast

Tankred

Gast

DeepShadow

Lt. Junior Grade

Tankred

Gast

DeepShadow

Lt. Junior Grade

Sir_Sascha

Admiral

Anhänge

DeepShadow

Lt. Junior Grade

DeepShadow

Lt. Junior Grade

Tankred

Gast

DeepShadow

Lt. Junior Grade

Sir_Sascha

Admiral

Ähnliche Themen