• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover

C

CloudTheWarrior

Neues Mitglied
Ich suche einen Mouseover HTML-Code.

Wenn man HIER über den Text einer Karte fährt öffnet sich ein Fenster mit Bild und Text.
Kann mir einer helfen?


Danke :)
 
Head Bereich ich hab den bei meiner HP benützt

Code: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu</title>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = ""  /* hier kommt jeweils eine Grafik hin und zwar immer zwischen die "" */
button2= new Image();
button2.src = ""

button3= new Image();
button3.src = ""
button4= new Image();
button4.src = ""

button5= new Image();
button5.src = ""
button6= new Image();
button6.src = ""

button7= new Image();
button7.src = ""
button8= new Image();
button8.src = ""

button9= new Image();
button9.src = ""
button10= new Image();
button10.src = ""

button11= new Image();
button11.src = ""
button12= new Image();
button12.src = ""
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
</script>
</head>
Und das hier kommt in den Body Bereich

Code: 
<p>
    
    <a href="" target="mainFrame" <!-- hier jeweils bei a href normal das ziel eigeben //-->
    onmouseover="button01.src='Home2.png';" <!-- hier jeweils die .png durch andere ersetzen //-->
    onmouseout="button01.src='Home1.png';">
      
      <img src="" border="0" name="button01" /> <!-- hier bestimmt man jeweils welcher button als erster angezeigt wird normalerweise ist das button1 //-->    
      
    </a>
<!-- jetzt das einfach bei allen anderen das selbe machen //-->
 
<a href="" target="mainFrame"
    onmouseover="button02.src='Jahresprogramm2.png';"
    onmouseout="button02.src='Jahresprogramm1.png';">
          
          <img src="" border="0" name="button02" />
      
  </a>
      
<a href="" target="mainFrame"
    onmouseover="button03.src='Ergebnisse2.png';"
    onmouseout="button03.src='Ergebnisse1.png';">
        
        <img src="" border="0" name="button03" />
    
    </a>
    
    <a href="" target="mainFrame"
    onmouseover="button04.src='Presse2.png';"
    onmouseout="button04.src='Presse1.png';">
    
        <img src="" border="0" name="button04" />
        
    </a>
    
    <a href="" target="mainFrame"
    onmouseover="button05.src='Gallery2.png';"
    onmouseout="button05.src='Gallery1.png';">
    
       <img src="" border="0" name="button05" />
        
    </a>
    
    <a href="" target="mainFrame"
    onmouseover="button06.src='Kontakt2.png';"
    onmouseout="button06.src='Kontakt1.png';">
    
        <img src="" border="0" name="button06" />
        
    </a>    
</p>
ich hoffe das hilft dir ein wenig ist zwar per css aber ist der beste den ich gefunden hatte, und wenn du ein bisschen herumprobierst denke ich das man das ebenso hinkriegt wie auf deiner Link HP
FSG Uetikon am See hier kannst du sehen wies aussieht ich weiss ich hab mit frames gearbeitet nicht gerade die beste art und weise.

MFG devilseye
 
Hallo,

ich möchte auch eine Infobox erstellen. Doch bei mir soll sie sich öffnen, wenn man mit der Maus über ein Bild fährt.

Kann ich die o. g. Codes dafür verwenden? Denn es exsistieren ja schon die "Head- u. Body-Bereiche". Wie kann ich diese Codes denn bei mir intigrieren?

Zusätzlich würde ich noch detailierte Infos benötigen, was ich wo ersetzen muss. jpg?, Quelle? ect.

Die Info-Boxen sollen hier Info´s zu den Bilder sichtbar machen.

Vielen Dank für die Hilfe.

LG welpifloh
 
villeicht kann dir das ja weiterhelften:
<html>
<head>
<script type="text/javascript">
function Fenster() {
document.getElementById('InfoBox').innerHTML = ("<div style='position:absolute; top:136px; width:208px; background-color:#FFFFE0; border:1px solid #804000; padding:10px'>Diese Hunde sind wirklich sehr süüß! </div>");
}
function FensterZu() {
document.getElementById('InfoBox').innerHTML = (" ");
}
</script>
</head>
<body>
<div onmouseover="Fenster()" onmouseout="FensterZu()">
<img src="Hunde.jpg" width="500" height="500">
</div>
<div id="InfoBox"></div>
</body>
</html>


schöne grüße: Maffin
 
Zuletzt bearbeitet:
Infobox

Hallo Maffin,

kann ich den Quellcode so in meine html-Seite einbetten, oder muss ich etwas anpassen? Auch irritieren mich die offenen { ?

Wie ich schon erwähnte, ich bin mit ccs noch nicht wirklich vertraut, hab deshalb bitte Nachsicht, wenn sich meine Fragen doof anhören.

Vielen Dank auf jeden Fall, vielleicht kann ich es ja so einbauen.

Wäre toll, wenn Du mir es detailiert erklärst, wie u. was ich einfügen/ändern kann, muss, soll.

Gruß welpifloh
 
@welpifloh
die offenen {} sind etwa das gleich wie die <>, nur das man die {} beim css gebraucht das könnte dann so aussehen:
<html>
<head>
body {
bgcolor="#FFFFFF";
}
</head>
<body>
<!-- bgcolor von body ist #FFFFFF ohne das dieser im body tag angegeben werden muss, mit einer ausgelagerten datei wird das bei allen seiten übernommen //-->
</body>
</html>
ganz einfach dargestellt, so kannst du auch divs und andere tags bestimmen.
Ach ja die styleangaben nicht vergessen.
Hoffe das stimmt so.

Mfg devilseye
 
Nein, das stimmt nicht. CSS im Kopfbereich definiert man so:

Code: 
<style type="text/css">
body {
background-color: #fff;
}
</style>
 
Vllt wäre es allgemein besser, wenn du ersteinmal die Grundlagen von HTML und CSS lernst. Du schreibst ins HTML-Unterforum das du etwas "mouseover" wissen möchtest, was JavaScript ist und dann den "Mouseover HTML-Code" dafür verlangst...

Das onmouseover-Event ist anwendbar auf folgende HTML-Tags:

Code: 
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, 
<cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, 
<hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, 
<samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, 
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Gruß
Loon3y
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben