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

Mouseoder Effekt

Status
Für weitere Antworten geschlossen.
N

Necro

Neues Mitglied
Mouseover Effekt

********

Hi,

Ich stelle mich erstmal vor :razz:

Ich bin der Daniel, 16Jahre jung, Webdesigner :D

Denke das reicht :mrgreen:

=============================================

Komm ich auch gleich zum Thema:

Ich hab mir ein neues Portfolio erstellt...
Nun möchte ich an den Menü-Buttons einen Mousover Effekt....

Leider kapier ich das gaaaaaaarnicht :shock:

Kann mir jmd an einem Bpsl, an meinem Portfolio zeigen wie das klappt ?

Hier mal die Index.html :

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>Necro-Designs.de || ND ||</title>
<style type="text/css">
<!--
body {
    background-image: url('Bilder/hintergrund.gif');}
}
body,td,th {
    font-family: Tahoma;
    font-size: 11px;
}
-->
</style></head>

<body>
<table width="679" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><table width="679" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="Bilder/475742dd3_02.jpg" width="679" height="203" alt="" /></td>
      </tr>
    </table>
      <table width="679" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="Bilder/475742dd3_04.gif" width="679" height="23" alt="" /></td>
        </tr>
      </table>
      <table width="679" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="505" valign="top" background="Bilder/475742dd3_07.gif"><table width="505" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><table width="490" border="0" align="right" cellpadding="0" cellspacing="0">
                <tr><td><p><b>Aktuelles Release: 20.August</b><br />

                    </td>
                </tr>
              </table></td>
            </tr>
          </table></td>
          <td width="174" valign="top" background="Bilder/475742dd3_25.gif"><table width="174" border="0" cellspacing="0" cellpadding="0">
            <tr>
[COLOR=Black]  <td colspan="3">[COLOR=Red]<a href="#"><img src="Bilder/475742dd3_06.gif" alt="" width="174" height="34" border="0" /></a>[/COLOR]</td>[/COLOR]
            </tr>
            <tr>
              <td colspan="3"><a href="#"><img src="Bilder/475742dd3_08.gif" alt="" width="174" height="31" border="0" /></a></td>
            </tr>
            <tr>
              <td colspan="3"><a href="#"><img src="Bilder/475742dd3_11.gif" alt="" width="174" height="30" border="0" /></a></td>
            </tr>
            <tr>
              <td colspan="3"><a href="#"><img src="Bilder/475742dd3_12.gif" alt="" width="174" height="30" border="0" /></a></td>
            </tr>
            <tr>
              <td colspan="3"><a href="#"><img src="Bilder/475742dd3_13.gif" alt="" width="174" height="29" border="0" /></a></td>
            </tr>
            <tr>
              <td colspan="3"><a href="#"><img src="Bilder/475742dd3_14.gif" alt="" width="174" height="32" border="0" /></a></td>
            </tr>
            <tr>
              <td colspan="3"><a href="#"><img src="Bilder/475742dd3_15.gif" alt="" width="174" height="37" border="0" /></a></td>
            </tr>
            <tr>
              <td><img src="Bilder/475742dd3_16.gif" width="10" height="126" alt="" /></td>
              <td><img src="Bilder/475742dd3_17.gif" width="155" height="126" alt="" /></td>
              <td><img src="Bilder/475742dd3_18.gif" width="9" height="126" alt="" /></td>
            </tr>
            <tr>
              <td colspan="3"><img src="Bilder/475742dd3_19.gif" width="174" height="9" alt="" /></td>
            </tr>
            <tr>
              <td><img src="Bilder/475742dd3_20.gif" width="10" height="128" alt="" /></td>
              <td><img src="Bilder/475742dd3_21.gif" width="155" height="128" alt="" /></td>
              <td><img src="Bilder/475742dd3_22.gif" width="9" height="128" alt="" /></td>
            </tr>
          </table></td>
        </tr>
      </table>
      <table width="679" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="Bilder/475742dd3_23.gif" alt="" width="679" height="29" border="0" usemap="#Map" /></td>
        </tr>
      </table></td>
  </tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="426,14,721,70" href="http://www.Necro-Designs.de/" />
</map></body>
</html>
Das rotmakierte ist für den Button "News"

wenn mir jmd. ein Bspl zeigen würde, hätte sich schon alles erledigt :)

Der Pfad zu den Mousover Buttons ist : /Bilder/mousover/

Datei name des Mousover ist gleich wieder der Ohen Mousover...

www.Necro-Designs.de

mit freundlichen Grüßen,
Necro




EDIT Bild (Werbung) entfernt - (Frank)
 
Zuletzt bearbeitet von einem Moderator:
Hallo Necro und herzlich willkommen in unserer HTML.de Community.

Also als 1.
Werbung ist untersagt. Also in Zukunft besser keine Werbebilder in Threads stellen. Kannst es in deine Signatur einfügen oder so ;)

2. Zu deinem Problem:
Wenn du ein Rollover haben willst, gibt es 2 möglichkeiten.
1 > mit JavaScript
2 > mit CSS.

Ich rate dir die CSS VAriante an, denn wenn jemand JS deaktviert hat, dann funktioniert das nicht..

Also mit JS wüsste ich es nicht so ganz genau, und habe keine Lust nachzugrübeln ;)
Hier die Variante in CSS:

Du erstellst einen Container (DIV) und formatierst den.
Also so sieht der CSS Code aus (unten erklärt):
Code: 
div#rollover {
width:xx px;
height:xx px;
border:0 px;
background-image:url(pfad/deinbild.jpg);
background-repeat:no-repeat;
}
Also das #rollover ist die Kennzeichnung für die ID rollover. Also in HTML id="rollover".

width, height und border sollten bekannt sein. Für die xx setzt du die angaben deines Bildes ein.

Als Hintergrundbild setzt du dein Bild, und das background-repeat ist dafür da, dass es das Hintergrundbild nicht wiederholt.

Nun müssen wir das rollover gemacht:
Code: 
div#rollover:hover {
width:xx px;
height:xx px;
border:0 px;
background-image:url(pfad/rolloverbild.jpg);
background-repeat:no-repeat;
}
Eigendlich dasselbe, ausser dass die Pseudoklasse :hover eingesetzt ist.
Hier ist das Hintergrundbild anderst.

Nun die HTML Teile:
HTML: 
<div id="rollover">
<a href="#">
<img src="spacer.gif" style="width:100%; height:100%; border:0px;" />
</a>
</div>
Ganz einfach.
Also man setzt einfach ein durchsichtiges (also transparentes) Bild ein, und setzt 100% höhe und Breite.
Und so ist das ganze Div (oder Bild) ein Link.

So das wars.


MfG, matibaski
 
kapier ich nicht ;ugl

kannst du mir mal ein bspl. an emien index datei zeigen ?

würde mir wirklich SEHR weiterhelfen :)

mit freundlichen Grüßen,
Necro
 
wow. - Wusste gar nicht dass das so kompliziert geth ;) also ich mach das immer so:
CSS
Code: 
div#menu a {
display : block;
width : 174px;
height : 34px;
line-height : 32px;
vertical-align : middle;
background-image : url("Bilder/475742dd3_06.gif");
background-position : left top;
background-repeat : no-repeat;
}
div#menu a:hover {
background-image : url("Bilder/Mouseover/475742dd3_06.gif");
}

Der HTML Teil siht dann so aus
Code: 
<div id="menu">
<a href="seite.ext">Link</a>
</div>

Die JavaScript Variante ist dagegen dann jedoch einfacher (auch ich rate von dieser Variante ab - Gründe wurden ja schon gesagt)
Code: 
<a href="seite.ext">
 <img src="Bilder/475742dd3_06.gif" alt="Bild" style="border:0;" 
 onMouseOver="this.src = 'Bilder/Mouseover/475742dd3_06.gif'"
 onMouseOut="this.src = 'Bilder/475742dd3_06.gif'"
 />
</a>
 
Habs kapiert, :)

Vielen dank für eure hilfe, man lernt nie aus :P

hoffe euch noch öfters mit meinen Fragen bescheren zu können ;ugl

mit freundlichen Grüßen,
Necro
 
@Frank:
Das hab ich von einem vorherigen Mouseover benutzt :D
Also damals hatte ich noch mit CSS angefangen.
Doch schon klar, deine Version ist besser und kürzer :D


MfG, matibaski
 
Die Variante von euch ist ja ganz nett, aber einen Nachteil hat sie,
die Rolloverbilder werden erst geladen, wenn 'rollovert' wird.
Preloader ist in dem Fall mit Kanonen auf Spatzen, also nimmt man lieber ein Bild, dass sowohl Rollover- als auch das normale Bild fasst.

Bei einem 30px hohem und 100px breitem Bils sähe das so aus:

Code: 
div#rollover {
display:block;
background-image:url(../style/menu_button.jpg);
background-position: 0 -60px;
font-family:Arial, Verdana, Helvetica, sans-serif;
width:100px;
height:30px;
color:#6699ff;
text-decoration:none;
}

div#rollover:hover {
background-position: 0 -30px;
}

Beispielbild:
menu_button.jpg


(Das Bild ist 170px breit, habe es für das Beispiel auf 100px gesetzt)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben