[HTML/javascript] mouseover en mouseclick

maandag 12 december 2011 19:17

Acties:

0 Henk 'm!

Topicstarter

Een goedenavond,
ik ben bezig met het bouwen van een website als priveprojectje, en daarbij maak ik gebruik van 2 frames (navbar en de daadwerkelijke pagina).

Wat ik wil is dat per pagina (dus per plaatje bovenin nabar) 3 plaatjes zijn, namelijk als 'gewoon' plaatje, als 'mouseover' en 'huidige pagina'. Nu ben ik ten eerste te lui om voor elke pagina een aparte navigatiebalk te schrijven en ten tweede zou ik niet weten hoe je meerdere pagina's kan laden in 1 klik (namelijk in navbar frame maar ook in pagina frame).

Nu heb ik een klein onderzoekje gedaan en daarbij kwam ik op het volgende script:

HTML:

...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigatiebalk</title>
<link rel="stylesheet" type="text/css" href="opmaaknavbar.css" />

<script type="text/javascript">

klik1=1;
klik2=0;
klik3=0;
klik4=0;
klik5=0;
klik6=0;
function klik(i) {
    if (i == 1) {
        document.getElementById("home").src="Images/homeklik.png";
        document.getElementById("contact").src="Images/contact.png";
        klik1=1;
        klik6=0;
    } else if (i == 6) {
        document.getElementById("home").src="Images/home.png";
        document.getElementById("contact").src="Images/contactklik.png";
        klik1=0;
        klik6=1;
    }
    else if (i == 0) {
        document.getElementById("home").src="Images/home.png";
        document.getElementById("contact").src="Images/contact.png";
        klik1=0;
        klik6=0;
    }
}

function mouseover(i) {
    if (i == 1) { 
        document.getElementById("home").src="Images/homeover.png";
    } else if (i == 6) {
        document.getElementById("contact").src="Images/contactover.png";
    }
}

function mouseout(i) {
    if (i == 1) {
        if(klik1 == 1){
        document.getElementById("home").src="Images/homeklik.png";
        }
        else {
        document.getElementById("home").src="Images/home.png";
        }
    } else if (i == 6) {
        if(klik6 == 1){
        document.getElementById("contact").src="Images/contactklik.png";
        }
        else {
        document.getElementById("contact").src="Images/contact.png";
        }
    }
}
</script>
</head>

<body>
<div class="navbaropmaak">

<a href="home.html" target="pagina" onclick="klik(1)" onmouseover="mouseover(1)" onmouseout="mouseout(1)"><img src="Images/homeklik.png" width="60" height="30" border="no" style="text-decoration:none" id="home"></a>
...
...
<a href="contact.html" target="pagina" onclick="klik(6)" onmouseover="mouseover(6)" onmouseout="mouseout(6)"><img src="Images/contact.png" width="90" height="30" border="no" style="text-decoration:none" id="contact"></a>
</div>
</body>
</html>

Dit werkt naar behoren, maar dit is nog maar code voor 2 van de 6 plaatjes, dat wordt dus een hele lijst. Volgens mij moet het op een efficiëntere manier kunnen maar ik kom er niet uit hoe

.

Daarnaast zit ik ook nog met het probleem dat er links op de pagina's staan die niet 'bereikbaar' zijn vanuit de navbar. Op dat moment wil ik dus dat alle knoppen weer terug gaan naar 'normaal', door klik1 t/m 6 allemaal 0 te maken en alle plaatjes weer te resetten. Het probleem is echter dat ik het script niet kan bereiken omdat die script alleen in de navbar staat. Nu dacht ik dat door de javascript extern in een file te zetten het wel zou werken, maar helaas, er verandert niks. Iemand een idee of dat mogelijk is bij gebruik van frames?

Alvast bedankt voor jullie hulp!

maandag 12 december 2011 19:48

Acties:

0 Henk 'm!

dev10

Dit kun je heel gemakkelijk voor elkaar krijgen met CSS, sprites en background-position.

Je maakt een afbeelding waarin je alle drie de afbeeldingen zet (hover, click en normaal) en met CSS zorg je er dan voor dat je het goede gedeelte van de afbeelding laat zien:

Cascading Stylesheet:

a.home {
  background-image: url('img/home.png');
}

a.contact {
  background-image: url('img/contact.png');
}

a.nav-bar-item:hover {
  background-position: 0 100px;
}

a.nav-bar-item:active {
  background-position: 0 200px;
}

De HTML die je daarbij kunt gebruiken:

HTML:

<ul>
  <li><a href="#" class="home nav-bar-item">Home</a></li>
  <li><a href="#" class="contact nav-bar-item">Contact</a></li>
</ul>

Zie ook: http://css-tricks.com/158-css-sprites/

Overigens kun je door middel van een simpel stukje PHP er voor zorgen dat je niet voor iedere pagina een navigatiebar hoeft te schrijven:

PHP:

1	include('navigatiebar.php');

In navigatiebar.php zet je dan je navigatiebar, doh, en waar jij die wilt weergeven zet je bovenstaand stukje PHP-code.

[ Voor 15% gewijzigd door dev10 op 12-12-2011 19:51 ]

woensdag 14 december 2011 11:03

Acties:

0 Henk 'm!

hiekikowan

Zoals dev10 al zegt is het tegenwoordig niet meer nodig hiervoor javascript te gebruiken. Met allerlei simpele CSS is dit ook al mogelijk.

Dev10 begint over sprites, je kunt met ongeveer dezelfde code ook gewoon de achtergrondplaatjes vervangen.

offtopic:
Wat moeilijker, sprites bieden met CSS3 voordeel van transitions waarmee je allerlei flash-effecten kunt bereiken.

woensdag 14 december 2011 11:30

Acties:

0 Henk 'm!

kobusp

Sprites zijn wel beter, m.i. Ook in eerdere CSS-versies. Anders wordt het plaatje pas geladen bij de hover, en dat kan soms lelijk zijn: bij de eerste keer hoveren kan er een of meerdere seconden eventjes niks zichtbaar zijn. Dat kan vooral bij grote webapps en websites irritant worden.

[ Voor 46% gewijzigd door kobusp op 14-12-2011 11:33 ]

woensdag 14 december 2011 13:22

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Javascript

Vergeet alleen niet dat zonder afbeeldingen (bijvoorbeeld bij afdrukken of in het geval van webrichtlijnen of gewoon kwaliteit) de tekst wel leesbaar moet blijven.

[ Voor 6% gewijzigd door Bosmonster op 14-12-2011 13:23 ]

dinsdag 27 december 2011 20:25

Acties:

0 Henk 'm!

IceBlackz

Topicstarter

dev10 schreef op maandag 12 december 2011 @ 19:48:
Dit kun je heel gemakkelijk voor elkaar krijgen met CSS, sprites en background-position.

Je maakt een afbeelding waarin je alle drie de afbeeldingen zet (hover, click en normaal) en met CSS zorg je er dan voor dat je het goede gedeelte van de afbeelding laat zien:

...

De HTML die je daarbij kunt gebruiken:

...

Zie ook: http://css-tricks.com/158-css-sprites/

Overigens kun je door middel van een simpel stukje PHP er voor zorgen dat je niet voor iedere pagina een navigatiebar hoeft te schrijven:
PHP:
1
include('navigatiebar.php');
In navigatiebar.php zet je dan je navigatiebar, doh, en waar jij die wilt weergeven zet je bovenstaand stukje PHP-code.

Hmm.. kun je het ook uitleggen zonder sprites? Want ik snap het idee achter sprites wel, maar even niet hoe het nu werkt in CSS

Je stelt op een of andere manier backgroundimages in voor een tekst, maar loopt die tekst er dan niet overheen?

En als ik het goed zie komen nu de knoppen onder elkaar ipv. naast elkaar?

[ Voor 27% gewijzigd door IceBlackz op 27-12-2011 20:41 ]

woensdag 28 december 2011 08:47

Acties:

0 Henk 'm!

Niemand_Anders

Dat was ik niet..

De sprites veranderen de look & feel van je website niet. Door veel gerelateerde images op 1 image te zetten en vervolgens met css de offset bepaald (nieuwe positie linker bovenhoek) hoeft je browser dus minder images in te laden en is je pagina sneller geladen.

In jouw geval plaats je de drie 'losse' images onder elkaar of naast elkaar (maakt niet zoveel uit, maar meestal houd men vertikaal aan) en in plaats van dat je in CSS een andere image inlaad, verander je alleen de offset. De browser hoeft op dat moment dus geen nieuw plaatje in te laden als iemand over een menu item gaat. Je veranderd alleen de 'viewport' in de huidige grote image.

De offset werkt dus ongeveer zoals de scrollbars in jouw browser. Hoewel er meer informatie is, dan er ruimte is gereserveerd, kun je doormiddel van de scrollbars toch alles (laten) zien..

If it isn't broken, fix it until it is..

woensdag 28 december 2011 14:33

Acties:

0 Henk 'm!

IceBlackz

Topicstarter

Niemand_Anders schreef op woensdag 28 december 2011 @ 08:47:
De sprites veranderen de look & feel van je website niet. Door veel gerelateerde images op 1 image te zetten en vervolgens met css de offset bepaald (nieuwe positie linker bovenhoek) hoeft je browser dus minder images in te laden en is je pagina sneller geladen.

In jouw geval plaats je de drie 'losse' images onder elkaar of naast elkaar (maakt niet zoveel uit, maar meestal houd men vertikaal aan) en in plaats van dat je in CSS een andere image inlaad, verander je alleen de offset. De browser hoeft op dat moment dus geen nieuw plaatje in te laden als iemand over een menu item gaat. Je veranderd alleen de 'viewport' in de huidige grote image.

De offset werkt dus ongeveer zoals de scrollbars in jouw browser. Hoewel er meer informatie is, dan er ruimte is gereserveerd, kun je doormiddel van de scrollbars toch alles (laten) zien..

Ahja, dat begrijp ik dus allemaal wel, alleen hoe de code an sich werkt niet ;-) Zoals ik al zei, je stelt blijkbaar een achtergrondimage in voor een tekst, maar komt die tekst er dan niet overheen ofzo?

offtopic:
edit: Hmm, ik doe wel erg lui nu, misschien moet ik het zelf even gaan testen i.p.v. hier te vragen

maandag 2 januari 2012 14:01

Acties:

0 Henk 'm!

IceBlackz

Topicstarter

Even getest, en wat ik al dacht dus, er komt tekst te staan terwijl de knoppen al tekst bevatten van waarnaar ze toe linken.. Daarnaast kan ik zo ook niet de juiste afmetingen van de afbeelding meegeven..

Daarnaast werkt active niet zoals ik wil, daarmee verandert hij blijkbaar alleen als je op de knop klikt maar verandert daarna weer terug. Ik wil dat hij in die 'veranderde' staat blijft totdat er op een andere knop wordt geklikt, dan pas mag hij terugkeren naar normaal..

Het enige probleem met mijn huidige javascript is dat hij niet 'onthoud' op welke pagina hij was wanneer er wordt gerefreshed. Dat heb ik nu omzeilt om bij het refreshen standaard terug te keren naar de homepagina, maar dat is natuurlijk niet erg netjes..

Is er een manier om in javascript de URL van een ander frame op te vragen en deze te testen met een if?

JavaScript:

1	huidigepagina=parent.pagina.location;

heeft dat gefixed

[ Voor 32% gewijzigd door IceBlackz op 02-01-2012 16:11 ]

Onderwerpen