Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Problem: Verweis-sensitive Grafiken und Hover im CSS

  1. #1
    HTML Newbie
    Registriert seit
    25.11.2010
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Idee Problem: Verweis-sensitive Grafiken und Hover im CSS

    Hallo Leute,

    Folgendes Problem:
    Auf meiner Startseite sind 3 Große Buttons zu sehen. Wenn man mit der Maus drüber fährt färben sich diese Rot und 2 Buttons erscheinen darunter. (siehe Screenie am Ende)
    Code:
    a.AsiaButton 		{
       display:block;
       width:300px;
       height:450px;
       background:transparent url(../Grafiken/Hover/AsiaHover.png) no-repeat top left ;
    					}
    
    a.AsiaButton:hover {
       display:block;
       width:300px;
       height:450px;
       background:transparent url(../Grafiken/Hover/AsiaHover.png) no-repeat bottom left;
    Soweit funktioniert ja auch alles...
    Nun habe ich jedoch solche "LinkBoxen" definiert die genau auf den 2 kleineren Buttons liegen. Sie funktionieren sprich sie verlinken zum richtigen Ziel jedoch geht der Hover-Effekt beim "betreten" der Linkboxen und somit auch die kleinen Buttons flöten.

    Code:
    #map {
    position: relative;
    }
    
    #map ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    #map a {
    position: absolute;
    text-indent: -1000em;
    }
    #map .Button1 a {
    top: 340px;
    left: 5px;
    width: 135px;
    height: 65px;
    }
    
    #map .Button2 a {
    top: 340px;
    left: 160px;
    width: 135px;
    height: 65px;
    }
    Und hier die HTML-Datei.
    HTML-Code:
    <html>
    
    <head> 
    
    <title>Restaurant Gehimtipps</title>
    <link href="CSS/layout.css" 		rel="stylesheet" 	type="text/css">
    <link href="CSS/LinkBoxen.css" 		rel="stylesheet"	type="text/css">
    <link href="CSS/Hover.css" 			rel="stylesheet" 	type="text/css">
    <link href="CSS/Hover.css" 			rel="stylesheet" 	type="text/css">
    
    </head>
    
    <body>
    <center><img src="Grafiken/Headline.png" alt="Restaurant-Geheimtipps"></center>
    
    <br /><br /><br /><br />
    
    <table border="0" align="center">
      <tr>
      <th width="400">	<div id="map">
                    	<a class="AsiaButton"></a>
                        <ul>
                            <li class="Button1"><a href="Links/A1.html">Asiatisch1</a></li>
                            <li class="Button2"><a href="Links/A2.html">Asiatisch2</a></li>
                        </ul>
                        </div></th>
                        
      <th width="400"><div id="map">
                    	<a class="ItaButton"></a>
                        <ul>
                            <li class="Button1"><a href="Links/I1.html">Italienisch1</a></li>
                            <li class="Button2"><a href="Links/I2.html">Italienisch</a></li>
                        </ul>
                        </div></th>
                        
      <th width="400"><div id="map">
                    	<a class="DeuButton"></a>
                        <ul>
                            <li class="Button1"><a href="Links/D1.html">Deutsch1</a></li>
                            <li class="Button2"><a href="Links/D2.html">Deutsch2</a></li>
                        </ul>
                        </div></th>
      </tr>
    </table>
    </body>
    </html>
    Meine Frage also. Was muss ich wie machen da mit der Hover-Effekt beim 'betreten' der Linkboxen immer noch aktiv bleibt?

    Hier der versprochene Screenie
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiserliche Hoheit
    Registriert seit
    01.03.2007
    Beiträge
    1.957
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Wenn ich mich nicht täusche brauchen alle class="AsiaButton" und dann mittels class="Button1".
    Den Button1 Hover musst du dementsprechend mit dem AsiaButton Hover verknüpfen.

    Mach vorher ein Backup...^^ Ich bin nicht 100% sicher ob das geht.
    Geändert von Ericfischer (25.11.2010 um 17:43 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    25.11.2010
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Ich versteh jetzt nicht was du meinst.

    Sry ich bin halt ein HTML-Noob!

    Wenn du etwas genauer beschrieben könntest was du meinst wär' das ziehmlich hilfreich.

  4. #4
    Kaiserliche Hoheit
    Registriert seit
    01.03.2007
    Beiträge
    1.957
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Kannst du evtl. mal einen Link zu der Seite reinstellen?

    Ich würde es gern mal versuchen anzupassen

  5. #5
    Kaiserliche Hoheit
    Registriert seit
    01.03.2007
    Beiträge
    1.957
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Der Threadersteller hat mir die Resourcen mal geschickt...

    Du hast das <a> an der falschen Stelle geschlossen.
    So muss das aussehen:
    HTML-Code:
      <th width="400">
    	<div id="map">
            <a class="AsiaButton">
                <ul>
                    <li class="Button1"><a href="Links/A1.html">Asiatisch1</a></li>
                    <li class="Button2"><a href="Links/A2.html">Asiatisch2</a></li>
                </ul>
            </a>
        </div>
      </th>
    Jetzt musst du aber noch die Hover Grafiken anpassen!


    LG
    Eric
    Geändert von Ericfischer (25.11.2010 um 17:44 Uhr)

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    25.11.2010
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Wenn ich ich den a-Tag später schließe löst sich mien Problem leider auch nicht. Der Hover-Effekt verschwidnet beim "betreten" der LinkBox

  7. #7
    Kaiserliche Hoheit
    Registriert seit
    01.03.2007
    Beiträge
    1.957
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Also im Opera hatte ich das Problem gestern nicht.
    Ich kann mir das ja nochmal kurz anschauen...

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    25.11.2010
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Das ganze ist ein Schulprojekt bin also an Firefox und InternetExplorer gebunden obwohl der IE außeracht gelassen werden kann
    Geändert von Manethos (26.11.2010 um 14:53 Uhr)

  9. #9
    Kaiserliche Hoheit
    Registriert seit
    01.03.2007
    Beiträge
    1.957
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    CSS hab ich jetzt nur ein paar Basics -.-

    schau dir mal auf cssplay.co.uk die "CSS Multilevel Dropdown Menüs" an.
    Das ist das was du machen willst.
    Ich hab dafür jetzt aber grad keine Zeit und auch keine lust mich damit groß zu beschäftigen.

    Sorry, aber du schaffst das schon

    Aber bestimmt kein Schulprojekt an nem Gymnasium?!

    Andere Forenmitglieder hier haben mehr Ahnung in solchen Sachen wie ich... welche sich auch mal melden könnten ^^

  10. #10
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Problem: Verweis-sensitive Grafiken und Hover im CSS

    Naja, mit CSS geht das auch nicht ganz so gut. Aber dashier funktioniert (im FF 3.6 getestet):
    HTML-Code:
    <html>
     <head>
      <style type="text/css">
         .tipButton {
        width: 300px;
        height: 400px;
       }
       .tipButton .button {
        width: 300px;
        height: 300px;
        background: #000;
        /* Hier dann das Background-URL hin*/
        background-position: 0 0;
       }
       .tipButton .linkButton {
        display: none;
        border: 2px solid #808080;
        background: #CCC;
        color: #000;
        width: 120px;
        height: 30px;
        float: left;
       }
       div.tipButton:hover .button {
        /* Hier das Background-Position für hover */
        background: #F00;
       }
       div.tipButton:hover .linkButton {
        display: block;
       }
      </style>
     </head>
     <body>
      <div class="tipButton">
       <div class="button"></div>
       <a href="foo.html" class="linkButton">Tipp1</a>
       <a href="foo2.html" class="linkButton">Tipp2</a>
      </div>
     </body>
    </html>
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

Ähnliche Themen

  1. Verweis-sensitive Grafiken in HTML 4 aber nicht in xhtml
    Von dernetteMann im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 07.06.2008, 00:21
  2. Textbereich festlegen? + Verweis-Sensitive auch im BG-Bild??
    Von DoneOne im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 02.04.2008, 13:31
  3. Image Map - Sensitive Verweis - Klappt nicht!
    Von rth144 im Forum HTML & CSS Forum
    Antworten: 21
    Letzter Beitrag: 07.05.2007, 14:01
  4. Frage zu: Verweis-sensitive Grafiken definieren
    Von fiete im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 29.04.2006, 02:02
  5. Antworten: 2
    Letzter Beitrag: 27.05.2004, 18:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •