ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » Hover/activated effekt mit bild

Geschlossen
  1. #1
    User Pic
    Subtellite Mitglied
    Registriert seit
    28.05.2012
    Beiträge
    12
    Beitragswertungen
    0 Beitragspunkte
    index

    <!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" />
    <link rel="stylesheet" type="text/css" href="include/designs/GEG_02_orange/style.css">
    <title>{TITLE}</title>
    <style type="text/css">
    	<li><a href="index.html" class="home"><img src="Bilder/home.png" width="113" height="50" alt="home"></a></li>
    </ul>
    }
    -->
    </style>
    </head>
    
    <body bgcolor="#000000" style="margin:0">
    <table width="1080" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <th scope="row"><img src="include/designs/GEG_02_orange/Bilder/header.png" width="1080" height="160" alt="header" /></th>
      </tr>
      <tr>
        <th scope="row"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="113" height="50" scope="row"><a href="?news"><img src="include/designs/GEG_02_orange/Bilder/home.png" width="113" height="50" border="0" /></a></th>
            <td width="119"><a href="?forum"><img src="include/designs/GEG_02_orange/Bilder/forum.png" width="119" height="50" border="0" /></a></td>
            <td width="124"><a href="?teams"><img src="include/designs/GEG_02_orange/Bilder/teams.png" width="124" height="50" border="0" /></a></td>
            <td width="132"><a href="?gallery"><img src="include/designs/GEG_02_orange/Bilder/join.png" width="132" height="50" border="0" /></a></td>
            <td width="141"><a href="?contact"><img src="include/designs/GEG_02_orange/Bilder/servers.png" width="141" height="50" border="0" /></a></td>
            <td width="106"><a href="?impressum"><img src="include/designs/GEG_02_orange/Bilder/links.png" width="106" height="50" border="0" /></a></td>
            <td width="170"><a href="?matches"><img src="include/designs/GEG_02_orange/Bilder/downloads.png" width="170" height="50" border="0" /></a></td>
            <td width="175" height="28"><a href="?downloads"><img src="include/designs/GEG_02_orange/Bilder/impressum.png" width="175" height="50" border="0" /></a></td>
          </tr>
        </table></th>
      </tr>
      <tr>
        <th scope="row"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="175" valign="top" background="include/designs/GEG_02_orange/Bilder/content-links.png" scope="row">
    		{_list_menunr1@
    		<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="175" height="24" align="center" valign="middle" background="include/designs/GEG_02_orange/Bilder/orange_10.png" scope="row"><span class="Stil1">%1</span></td>
              </tr>
              <tr>
                <th scope="row"><span class="Stil1">%2</span></th>
              </tr>
            </table>
    		}
    		</td>
            <td width="729" valign="top" background="include/designs/GEG_02_orange/Bilder/content.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th align="left" scope="row"><span class="Stil1">{EXPLODE}</span></th>
              </tr>
            </table></td>
            <td width="176" valign="top" background="include/designs/GEG_02_orange/Bilder/content-rechts.png">
    		{_list_menunr2@
    		<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th width="176" height="24" background="include/designs/GEG_02_orange/Bilder/orange_12.png" scope="row"><span class="Stil1">%1</span></th>
              </tr>
              <tr>
                <th align="left" scope="row"><span class="Stil1">%2</span></th>
              </tr>
            </table>
    		}
    		</td>
          </tr>
        </table></th>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.geg-community.eu"><img src="include/designs/GEG_02_orange/Bilder/orange_15.png" width="920" height="19" border="0" /></a></th>
      </tr>
    </table>
    </body>
    </html>
    
    {_list_hmenupoint@<a target="%1" class="menu" href="%2">%3</a>|||}
    {_list_hmenubegi@}
    {_list_hmenuende@}
    
    {_list_vmenupoint@<a target="%1" class="menu" href="%2">%3</a>|||}
    {_list_vmenubegi@}
    {_list_vmenuende@}


    und style

    /*
      css Datei copyright by ilch.de
      erstellt von scaRFhogg
      seite: www.daiwai.de
      
      --
      
      Design copyright by ilch.de
      erstellt von fanguro
      seite: www.zurro.de
      
      --
      
      Support auf www.ilch.de
    */
    
    body {
     body margin: 0px; background: #000000; background-image:url(Bilder/page-bg.jpg);
      background-position: top; background-repeat: no-repeat;background-attachment:fixed;
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #000000;
      font-size: 12px;
      font-family: Verdana, sans-serif;
    }
    
    
    /* allgemein */
    
    td 
    {
      font-family: Verdana; 
      font-size: 12px;
    }
    
    a.home /*CSS Klasse die die Menuepunkte der Menues definiert*/
    {
    	display:block;
    	background-image:url(Bilder/home.png);
    	width: 113px;
    	height: 50px;
    }
    a.home:hover /*CSS Klasse die die Mousover-Menuepunkte der Menues definiert*/
    {
    	display:block;
    	background-image:url(Bilder/home-hover.png);
    	width: 113px;
    	height: 50px;
    }
    
    a.box 
    { 
      color: #003366; 
    	font-family: Verdana; 
    	font-size: 11px; 
    	text-decoration: underline; 
    }
    
    a.box:hover 
    {   
      text-decoration: none;  
    }
    
    .Chead
    {
      background: #202020;
      color: #FFFFFF;
    }
    
    .Chead td, .Chead td strong, .Chead h4, .Chead td b
    {
      background: #000000;
      color: #FFFFFF;
    }
    
    .Callg
    {
      background-color: #202020;
    	color: #000000;
    }
    
    .Callg td
    {
      color: #000000;
    }
    
    .Cnorm 
    {
      background-color: #202020;
    }
    .Cmite
    {
      background-color: #202020;
    }
    .Cdark
    {
      background-color: #202020;
    }
    
    .rand
    {
      border: solid #000000 1px;
    }
    
    .smalfont 
    { 
        font-size: 10px;
    		text-decoration: none; 
    }
    
    .border 
    { 
       background-color: #000000; 
    }
    hr 
    { 
        height: 0px; 
    		border: solid #003366 0px; 
    		border-top-width: 1px; 
    }
    
    input, textarea, select
    { 
        color: #FFFFFF;  
        font: 10px Verdana;  
        border-color: #000000;
      	border-width: 1px;
        border-style: solid;  
        font-weight: none;  
        text-decoration: none;  
        background-color: #202020;  
    }


    hallo,

    ich möchte meine menüleiste mit einem hover effekt versehen.

    normal: z.B. "home" mit dem effekt ohne "hover"
    hover: z.B. "home" mite dem effekt "home-hover"

    ich kriegs nicht auf die reihe das mein menü diesen hover effekt mit verschiedenen bildern darstellt. (DENKFEHLER FFS)

    betroffene Homepage: impa-vida.de/index.php?news


    Zuletzt modifiziert von Subtellite am 28.05.2012 - 00:55:27
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    google.de Mitglied
    Registriert seit
    26.01.2012
    Beiträge
    352
    Beitragswertungen
    33 Beitragspunkte
    da gibts mehrere Mögichkeiten.

    Enmal du nimmst das Img raus und lässt dies alles über css laufen.

    Im html:
    <label id="ButtonHome"></label>

    In der Css Datei:
    #ButtonHome {
       width:113px;
       height:50px;
       background:url(HierdieUrlzumImg);
    }
    
    #ButtonHome:hover {
       background:url(HierdieUrlzumHoverImg);
    }


    oder du lößt dass über html und inline js
    <img onmouseout="this.src='Pfad/stdImg'" onmouseover="this.src='Pfad/HoverImg'" alt="Home" src="Pfad/std.Img">


    oder oder oder. Es gibt noch 1000 möglichkeiten dies anders zu lösen.
    Kein Support per PN!
    Wenn ich zitiere ist dies KEIN Angriff auf die Person!
    1 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Subtellite Mitglied
    Registriert seit
    28.05.2012
    Beiträge
    12
    Beitragswertungen
    0 Beitragspunkte
    das thema hat sich übrigens erledigt. danke trotzdem
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    ja nur inline js würde ich nicht empfehlen macht das ganze abartig unübersichtlich ...

    wenn dann eine generische js funktion die es einmalig gibt und das ganze für jeden button der navigation gleich macht ...

    viel übersichtlicher und keine redundanzen
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Fehlersuche und Probleme

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten