[CSS] On hover achtergrond van andere div veranderen - Softwareontwikkeling

woensdag 16 maart 2005 09:08

Acties:

Unagi

Topicstarter

De topic titel zegt eigenlijk alles. Ik ben geheel nieuw in het gehele CSS gebeuren en ik wil van alles. Ik heb een menu gemaakt, horizontaal met drop down items. Ik heb in de linkerbovenhoek een plek voor een logo.

Nu wil ik bij het hoveren van de menu items dat logo veranderen. Dat logo zit in een andere div. Is dit mogelijk? En tevens wil ik dan op het moment dat de muis zich niet meer op het menu bevind dat het logo weer terug springt.

Dit is mijn style.css:

code:

#top    {
        width: 800px;
        background-image: url(img/back_grn_wide.png);
        background-repeat: no-repeat;
        float: left;
        height: 100px;
    }

#menu   {
        width: 700px;
        float: left;
        height: 100px;
        position: absolute;
        top: 60px;
        left: 250px;    
}

#menu ul {
        list-style: none;
        padding: 0;
        width: 110px;
        float: left;
    }

#menu a {
            font-family: Georgia, "Times New Roman",
                Times, serif;
        display: block;
        padding: 2px 3px;
        color: white;
        text-decoration: none;
    }

#menu ul a {
    height: 40px;
    }

#menu ul li {position: relative;
    }

#menu ul ul {   
        position: absolute;
        top: 40px;
        z-index: 500;
        width: 170px;
    }

#menu ul ul a {
        height: 17px;
        background-image: url(img/back_grn.png);
        background-repeat: repeat;
        display: block;
        border-top:1px solid white;
        border-right:1px solid black;
    
    }

#menu ul ul a:hover {
        background-image: url(img/menu_selected.png);
        background-repeat: repeat;      
    }
        
#menu ul ul ul {
        top: 0;
        left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#round {
        height: 165px;
        width: 230px;
        position: absolute;
        top: 9px;
        left: 9px;
        background-image: url(img/logo.png);
        background-repeat: no-repeat;
        z-index: 10;
    }

#menu a:hover div#round {
        background-image: url(img/menu_selected.png);
        background-repeat: repeat;
        }

#left {
        position: absolute;
        width: 150px;
        top: 108px;
        height: 400px;
        background-image: url(img/back_grn_left.png);
        background-repeat: repeat;  
        z-index: 5;
    }

Op regel nr 89 heb ik een stukje gezet dat volgens mij zou moeten zorgen dat het logo veranderd, maar dit gebeurt dus niet.

Mijn html ziet er als volgt uit:

code:

<html>

<head>
    <link rel="stylesheet" href="style/style.css">

</head>
<body>

<div id="round">
[img]"style/img/round.png">
</div[/img] 

<div id="top">
<div id="menu">
    <ul>
          <li><a href="#">Home</a>
        <ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Nieuws">Nieuws</a></li>
        <li><a href="#" title="Foto's van evenementen">Foto's evenementen</a></li>
        <li><a href="#" title="Telefoonlijst">Telefoonlijst</a></li>
        </ul>
      </li>
    </ul>
    <ul>
    <li><a href="#">Proj</a>
        <ul>
        <li><a href="#" title="Nieuws">Nieuws</a></li>
        <li><a href="#" title="Projecten">Projecten</a>
        <ul>
            <li><a href="#">Project1</a></li>
        </ul>
        </li>
        <li><a href="#" title="Afgesloten projecten">Afgesloten projecten</a></li>
        </ul>
        </li>
         </ul>
    <ul>
          <li><a href="#" title="Login">Login</a>
        <ul>
        <li><a href="#" title="Login">Login</a></li>
        </ul>
      </li>
    </ul>                       
</div>
</div>

<div id="left"><p><br><p><br>
<b>tekst</b>
</div>

</body>
</html>

Nou is mijn vraag of dit wel te doen is met alleen CSS of dat er javascript aan te pas moet komen.

offtopic:
Ik weet dat dit in IE niet werkt, dat is van later zorg

http://www.bonuszoeken.nl

woensdag 16 maart 2005 09:10

Acties:

faabman

http://www.xs4all.nl/~peterned/csshover.html
http://www.naarvoren.nl/artikel/hover.html

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 16 maart 2005 09:42

Acties:

Dirtbiter

Of in plaats van die htc dingen, gebruik je gewoon javascript.

JavaScript:

1	<td class="menutablecell" onmouseover="this.className='menutablecellhover'" onmouseout="this.className='menutablecell'">

En in plaats van "this" zet je dan het id van je te veranderen div...

woensdag 16 maart 2005 09:44

Acties:

BtM909

Watch out Guys...

Dirtbiter schreef op woensdag 16 maart 2005 @ 09:42:
Of in plaats van die htc dingen, gebruik je gewoon javascript.
JavaScript:
1
<td class="menutablecell" onmouseover="this.className='menutablecellhover'" onmouseout="this.className='menutablecell'">
En in plaats van "this" zet je dan het id van je te veranderen div...

Voordeel van die 'HTC dingen' is dat het IE-only is en laat die nou net die een :hover op andere elementen dan een <a> te ondersteunen.

Waarom zou je dan ook JS gebruiken voor browsers die het wel goed via CSS ondersteunen?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 16 maart 2005 09:49

Acties:

Verwijderd

Het div met id 'round' staat niet binnen het div met id 'menu' dus wat je in regel 89 van je css hebt staan gaat het niet doen.

Je zou kunnen kijken of je het logo binnen je menu brengt en dan dmv absolute positioning er weer buiten zet. Je zou dan iets kunnen doen met:

Cascading Stylesheet:

1	div#menu:hover div#leaugeau {background-color:somethingelse;}

Volgens mij doet IE dat soort :hover grappen alleen met links dus dan ben je er nog niet. Je zou (zou) iets kunnen doen als binnen elke link afzonderlijk een div zetten die absoluut gepositioneerd precies boven dat logo uitkomt en onhover zichtbaar wordt. Maar dan moet die positionering wel pixelperfect kloppen. Eigenlijk een houtje-touwtje oplossing waarbij je mi doordraaft in het toepassen van css om maar koste wat kost javascript te vermijden.

Dus: Hoe belangrijk is dat wisselende logo? Missen mensen essentiele informatie als het logo niet verandert bij het navigeren? Als het niet essenieel is maar meer 'added value', dan zou ik het gewoon met javascript doen. Als het wel essentieel is dan kun je denk ik het beste nog eens nagaan waarom een wisselend grafisch element buiten je menu essentieel is voor de navigatie....

donderdag 17 maart 2005 07:47

Acties:

Baarsjes

Unagi

Topicstarter

Verwijderd schreef op woensdag 16 maart 2005 @ 09:49:
Eigenlijk een houtje-touwtje oplossing waarbij je mi doordraaft in het toepassen van css om maar koste wat kost javascript te vermijden.

Dus: Hoe belangrijk is dat wisselende logo? Missen mensen essentiele informatie als het logo niet verandert bij het navigeren? Als het niet essenieel is maar meer 'added value', dan zou ik het gewoon met javascript doen. Als het wel essentieel is dan kun je denk ik het beste nog eens nagaan waarom een wisselend grafisch element buiten je menu essentieel is voor de navigatie....

Het wisselende logo is op geen enkele manier essentieel, het is idd 'added value'. En dus vind ik het ook geen probleem om het met javascript te doen.

Nu heb ik het volgende geprobeerd, zonder resultaat, waar zit dan nog mijn fout?

code:

1	<li><a href="#" onMouseOver="document.all.round.background = 'style/img/back_grn.png'" onMouseOut="document.all.round.background = 'style/img/logo.png'">Home</a>

Ik zet de background dus oorspronkelijk in mijn CSS, moet dit veranderd worden om dit te laten werken of zit er iets anders fout?

http://www.bonuszoeken.nl

donderdag 17 maart 2005 12:28

Acties:

Verwijderd

probeer dit eens:

JavaScript:

1	<li><a href="#" onmouseover="document.getElementById('round').style.backgroundImage = 'style/img/back_grn.png'">Home</a>

• • document.all is niet van deze tijd, van geen enkele tijd eigenlijk.
• je benaderd stijleigenschappen via js met bijv. obj.style.textAlign, iets-streepje-iets wordt ietsIets.
• gooi bovenstaande in een functie zodat je ook wat checks in kan bouwen (of document.getElementById bestaat bijv.)

donderdag 17 maart 2005 13:55

Acties:

Baarsjes

Unagi

Topicstarter

Verwijderd schreef op donderdag 17 maart 2005 @ 12:28:
probeer dit eens:
JavaScript:
1
<li><a href="#" onmouseover="document.getElementById('round').style.backgroundImage = 'style/img/back_grn.png'">Home</a>
[/li]

Deze code werkt met backgroundImage niet, maar als ik backgroundColor gebruik dan werkt het wel. Wat kan hier de oorzaak van zijn? Ook als ik de image verplaats naar dezelfde folder als het html bestand dan werkt het niet.

http://www.bonuszoeken.nl

donderdag 17 maart 2005 15:06

Acties:

Morrar

Zet dan nog wel even url() om die url van het plaatje... dus: url('style/img/back_grn.png')

[ Voor 20% gewijzigd door Morrar op 17-03-2005 15:07 ]

donderdag 17 maart 2005 15:29

Acties:

Verwijderd

Morrar schreef op donderdag 17 maart 2005 @ 15:06:
Zet dan nog wel even url() om die url van het plaatje... dus: url('style/img/back_grn.png')

o ja... dat natuurlijk ook.

vrijdag 18 maart 2005 07:18

Acties:

Baarsjes

Unagi

Topicstarter

Morrar schreef op donderdag 17 maart 2005 @ 15:06:
Zet dan nog wel even url() om die url van het plaatje... dus: url('style/img/back_grn.png')

Ook met dit werkt het nog niet, heb het op alle mogelijke manier geprobeerd. Ik heb nu bij mijn css de standaard background verwijderd, maar dan nog als ik het logo in mijn html zet zodat dat zou moeten verschijnen bij een hover gebeurt er niets.

Ik kan verder ook geen foutmeldingen ontdekken, is er iemand die dit wel werkend kan krijgen? Of mij een tip kan geven om de fout te vinden?

http://www.bonuszoeken.nl

vrijdag 18 maart 2005 08:54

Acties:

marty

Ook met dit werkt het nog niet, heb het op alle mogelijke manier geprobeerd. Ik heb nu bij mijn css de standaard background verwijderd, maar dan nog als ik het logo in mijn html zet zodat dat zou moeten verschijnen bij een hover gebeurt er niets.

test je het toevallig in IE? Die wil daar wel eens lastig bij doen. Een preloader kan het in dat geval oplossen.

Ik kan verder ook geen foutmeldingen ontdekken,

schrijf een functie zodat je zelf foutmeldingen kan genereren.

HTML:

<script language="javascript" type="text/javascript">
function toggleBackground()
{
   alert('we gaan de background veranderen');
   // etc.
}
</script>
<a href="#" onmouseover="toggleBackground();">link</a>

[ Voor 33% gewijzigd door marty op 18-03-2005 08:57 ]

vrijdag 18 maart 2005 11:20

Acties:

Baarsjes

Unagi

Topicstarter

Met de laatste opmerking en google is het uiteindelijke gelukt, met de code:

code:

<script language="javascript" type="text/javascript">
function toLogo()
    {document.getElementById('round').style.backgroundImage = "url('style/img/logo.png')";}
</script>

Is het gelukt, de url moet dus tussen dubbele aanhalingstekens staan, anders werkte het in ieder geval bij mij niet.

Iedereen bedankt voor de hulp.

http://www.bonuszoeken.nl