Brauche hilfe bei einer HP !

Vo0do0 · 19.09.2009, 16:45

ja das ist ein mouseover effekt.
genau das steht in den link den ich dir gegeben habe.

Anzeige

Schau dir mal diesen Bereich an. Dort ist für jeden was dabei!

Hendrik vD · 19.09.2009, 21:00

das ganze geht aber nicht mit bilder wenn ich das da jetzt richtig rausgelesen habe

Vo0do0 · 19.09.2009, 22:13

doch das geht auch mit bildern.
ganz sicher.
habe es selber schon zig mal benutzt.
du siehst doch die navigation oben hier bei forumla.
(Profil, Blog, Faq usw...)
wenn du da mit der maus drüber fährst ändern sich die buttons ja auch.
dieses ist mit css gemacht.

also schau dir auf den von mir gegebenen link einfach nochmal den abschnitt "Buttons mit Bildern" an...

Das_Es · 20.09.2009, 09:57

das Geht mit auch mit Bilder. hier geht es direkt zu den Punkt der es beschreibt

btw. Vo0do0 ich muss dich enttäuschen. Bei Forumla wird ein JS benutzt für den Effekt, was aber ein wenig mehr macht als einfach nur die Bilder aus zu tauschen.

Hendrik vD · 20.09.2009, 11:13

cool, geht !

jetzt muss ich sie nurnoch unereinader bekommen !

Kann mir vieleicht jemand sagen wie ich das mache

Hier der code

HTML-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></title>
 <style>
   #menu_home       { display:block;
             background-image:url(Bilder/Menue_03.gif);
             width:119px; height:35px }
   
   #menu_home:hover { background-image:url(Bilder/Menue2_03.gif); }
   
   #menu_ihr-event { display:block;
             background-image:url(Bilder/Menue_04.gif);
             width:119px; height:35px }
    
    #menu_ihr-event:hover { background-image:url(Bilder/Menue2_04.gif); }
 
 </style>
</head>
<body>

<div id="menu_home"><a href="index.html">&nbsp;</a></div>
<div id="menu_ihr-event"><a href="ihr-event.html">&nbsp;</a></div>

</body>
</html>

so habs einfach mit ner tabelle gemacht

mei code jetzt

HTML-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></title>
 <style>
   #menu_home       { display:block;
             background-image:url(Bilder/Menue_03.gif);
             width:119px; height:35px }
   
   #menu_home:hover { background-image:url(Bilder/Menue2_03.gif); }
   
   #menu_ihr-event { display:block;
             background-image:url(Bilder/Menue_04.gif);
             width:119px; height:35px }
    
    #menu_ihr-event:hover { background-image:url(Bilder/Menue2_04.gif); }
    
    #menu_ueber-uns { display:block;
             background-image:url(Bilder/Menue_05.gif);
             width:119px; height:35px }
             
    #menu_ueber-uns:hover { background-image:url(Bilder/Menue2_05.gif); }
    
    
    #menu_fotos { display:block;
             background-image:url(Bilder/Menue_06.gif);
             width:119px; height:35px }
             
    #menu_fotos:hover { background-image:url(Bilder/Menue2_06.gif); }
    
    #menu_preise { display:block;
             background-image:url(Bilder/Menue_07.gif);
             width:119px; height:35px }
             
    #menu_preise:hover { background-image:url(Bilder/Menue2_07.gif); }
    
    #menu_partner { display:block;
             background-image:url(Bilder/Menue_08.gif);
             width:119px; height:35px }
             
    #menu_partner:hover { background-image:url(Bilder/Menue2_08.gif); }
    
    #menu_kontakt { display:block;
             background-image:url(Bilder/Menue_09.gif);
             width:119px; height:35px }
             
    #menu_kontakt:hover { background-image:url(Bilder/Menue2_09.gif); }
 
 </style>
</head>
<body>


<table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td><img src="Bilder/Bilder_02.gif" width="15" height="35"></td>
    <td><div id="menu_home"><a href="index.html">&nbsp;</a></div></td>
    <td><div id="menu_ihr-event"><a href="ihr-event.html">&nbsp;</a></div></td>
    <td><div id="menu_ueber-uns"><a href="ueber-uns.html">&nbsp;</a></div></td>
    <td><div id="menu_fotos"><a href="fotos.html">&nbsp;</a></div></td>
    <td><div id="menu_preise"><a href="preise.html">&nbsp;</a></div></td>
    <td><div id="menu_partner"><a href="partner.html">&nbsp;</a></div></td>
    <td><div id="menu_kontakt"><a href="kontakt.html">&nbsp;</a></div></td>
    <td><img src="Bilder/Bilder_10.gif" width="117" height="35"></td>
    <td><img src="Bilder/Bilder_11.gif" width="40" height="35"></td>
  </tr>
</table>
</body>
</html>

so funktioniert er

Vo0do0 · 20.09.2009, 14:53

Das_Es

das Geht mit auch mit Bilder. hier geht es direkt zu den Punkt der es beschreibt

btw. Vo0do0 ich muss dich enttäuschen. Bei Forumla wird ein JS benutzt für den Effekt, was aber ein wenig mehr macht als einfach nur die Bilder aus zu tauschen.

stimmt, bei manchen buttons kommt ja noch ein dropdown menü

ist mir voher nie aufgefallen, da ich nur Profil + neue post nutze, und hier kein dropdown menü kommt.

@Hendrik vD
wolltest du uns mit deinem letzen post sagen dass du immernoch einen fehler hast oder dass es nun klappt?

Hendrik vD · 20.09.2009, 21:22

wolte nur sagen das es klapt und veielcht für andere die auch sowas brauichen denn html zeigen

Dreami · 20.09.2009, 21:35

Das Ganze geht übrigens auch mit Javascript, ohne dass die Seite danach nur in Firefox funktioniert, habe das selber im Einsatz. Man muss dazu auch nichts spezielles angeben, sondern nur den Code dort hinschreiben, wo er benötigt wird.
So sieht das bei mir aus (Ausschnitt aus meinem Menü, wird per php_include jedesmal in die Seite eingebunden):

HTML-Code:

<!--Anfang Menü-->
<!-- Ohne Mouseover, ist nur der Banner -->
<div align=center>
<a href="/">
<img src="Bilder/Dreami_Banner.png"
border="0"
name="Startseite" 
alt="Startseite"
width="700" height="200"></img>
  </a>
<!-- Mit Mouseover, ist ein Button -->
<div id="menue"><a href="Youtube.php"
onmouseover="Youtube.src='Bilder/Youtube_Button_Hover.png';"
onmouseout="Youtube.src='Bilder/Youtube_Button.png';"><img src="Bilder/Youtube_Button.png" alt="Youtube"
name="Youtube" width="100" height="30"
border="0"></img>
</a>
</div>
</div>
<br>
<!--Ende Menü-->

Btw. kann ich das mit den doppelten Div-Tags auch weglassen? Sieht etwas komisch aus.

Hendrik vD · 21.09.2009, 07:56

also wenn es so geht istn es gut aber ich lass das jetzt einfach so !

hab keine lust wieder alles umzuschreiben ^^ xd

Lilli · 22.09.2009, 14:39

Ich denke das das Problem bei Funpic liegt, ich benutze auch Firefox & manchmal geht die Seite auf & manchmal eben nicht. Ebenso bei meiner Funpic-page