PDA

Volledige versie bekijken : Javascript image rollover (array uitlezen)


kickinhard
%Europe/Berlin %404 %2007, 10:43
Hoi, ik zit hier niet zo vaak in het forum maar ik heb een probleem en de programmeurs hier op het werk zijn er allebij niet. Ik zit vast met een stuk javascript.

Ik heb op deze site: http://flevumps.intrige.eu het volgende probleem:
* Er moet bij elke link in elk menuitem een rollover komen. Wanneer je over de link heen gaat verdwijnen een aantal div's, waardoor een ander zichtbaar wordt.
* Nu is het zo dat er per gekleurd blok 1 foto is. Dus wanneer je een item aanklikt verandert de foto en zie je wanneer je over alle links heen gaat steeds dezelfde foto

* Ik moet er nou voor zorgen dat ipv dat er per blok een foto te zien is, dat er dadelijk per link een foto komt.

Het stukje javascript ziet er nu zo uit:

function rollOver(){

//verberg
document.getElementById('sfeerfotoKlein').style.di splay = 'none';
document.getElementById('content').style.display = 'none';

//vertoon
document.getElementById('sfeerfotoEmpty').style.di splay = 'block';
}
function rollOut(){
// en weer terug
document.getElementById('sfeerfotoKlein').style.di splay = 'block';
document.getElementById('content').style.display = 'block';

// verberg
document.getElementById('sfeerfotoEmpty').style.di splay = 'none';

}

Mijn html ziet er nu zo uit:

<div id="siteContainer">
<div id="header"><div class="logo"></div></div>
<div id="content_container"style="background-image:url(images/sfeerfoto/groot/sfeergroot_2.jpg); background-position: top right; background-repeat: no-repeat;">
<div id="containerLeft">
<?php
require_once('script/php/menu_blauw.php');
?>
<div id="sfeerfotoEmpty"></div>
<div id="sfeerfotoKlein" class="kleinBlauw"></div>
<?php
require_once('script/php/menu_groen.php');
require_once('script/php/menu_bruin.php');
require_once('script/php/menu_oranje.php');
?>
</div>
<div id="content" class="contentGroen">
<div id="contentTekst" class="scrollGroen">

<strong>Home</strong><br />
<b>Algemeen</b>
<div class="lijnGroen"></div><br /><br />

<p>Dé voornaamste basisbehoefte van een organisatie is kennis en capaciteit. Flevum People Sourcing (FPS) beschikt over de kennis, expertise en het netwerk, met andere woorden de bron (..source..), om voor u de juiste professional te vinden.</p>

<p>Wij zijn gespecialiseerd in hoger opgeleide professionals. Professionals die op interim basis hun toegevoegde waarde dagelijks bewijzen bij vrijwel alle denkbare bedrijven en organisaties. </p>

<p>Maar ook vaste professionals. Ambitieuze talentvolle mensen die toe zijn aan een logische vervolgstap om hun persoonlijke ambities waar te maken.</p>

<p>Eén betrouwbare partner die u vakkundig en snel oplossingen biedt voor al uw kennis en capaciteitsbehoefte. Zowel interim als vast.</p>
</div>
</div>
</div>
<div id="footer" class="footer_txt">
FPS is een jointventure van <a href="http://www.flevum.nl" target="_blank">Flevum</a> en <a href="http://www.sanddwood.com" target="_blank">Sanddwood</a>
</div>
</div>

Het menu dat geincluded wordt, en waar de rollovers opzitten ziet er zo uit:

<div class="menu groen">
<div class="menu_items">
<div class="kop"><h1><a href="/index.php" onmouseover="rollOver();" onmouseout="rollOut();">Home</a></h1></div>
<ul>
<li><a href="/content/home/visie_kernwaarden.php" onmouseover="rollOver();" onmouseout="rollOut();">visie &amp; kernwaarden</a></li>
<li><a href="/content/home/kandidaten.php" onmouseover="rollOver();" onmouseout="rollOut();">kandidaten</a></li>
<li><a href="/content/home/opdrachtgevers.php" onmouseover="rollOver();" onmouseout="rollOut();">opdrachtgevers</a></li>
<li><a href="/content/home/opdrachten_vacatures.php" onmouseover="rollOver();" onmouseout="rollOut();">opdrachten &amp; <br /> vacatures</a></li>
<li><a href="/content/home/contact.php" onmouseover="rollOver();" onmouseout="rollOut();">contact</a></li>
</ul>
</div>
</div>


Je ziet nu dus dat er voor elke pagina in ' CONTENT_CONTAINER' een vast plaatje in zit. Maar eigenlijk moet het dus zo worden dat er ipv een harde link een variabelen komt waar weer een functie aan vast zit. Ik weet ook niet of ik het beter met javascript kan oplossen of met php. Ik had zoiets in gedachten als dit:

<div id="content_container" style="background-image:url(images/sfeerfoto/groot/<?php $variabele_naam ?>);"> .... </div>

Kan iemand me hierbij helpen?

voskuh
%Europe/Berlin %428 %2007, 11:16
Ik heb zelf ook zoiets gebruikt. Heb het toen welliswaar regelrecht gejat van een andere site, maar toch. Ik hoop dat je hier wat mee kan.


<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
<!--
function setFoto(pFoto) {
document.getElementById('imgFoto').src = pFoto;
}
// -->
</script>
<div style="height:325px; width:325px;" id='advertentie_foto'>
<img src="http://www.zeelandnet.nl/prikbord/images/upload/6/advertentie_foto1306925-1.jpg" alt="" border="0" id="imgFoto" /><br />
</div>
<table width=325><tr>
<td><img onmouseover="setFoto('http://www.zeelandnet.nl/prikbord/images/upload/6/advertentie_foto1306925-1.jpg');" src="http://www.zeelandnet.nl/prikbord/images/upload/6/spotlight_foto1306925-1.jpg" alt="" border="0" class="small_Foto"></td>
<td><img onmouseover="setFoto('http://www.zeelandnet.nl/prikbord/images/upload/6/advertentie_foto1306925-2.jpg');" src="http://www.zeelandnet.nl/prikbord/images/upload/6/spotlight_foto1306925-2.jpg" alt="" border="0" class="small_Foto"></td>
<td><img onmouseover="setFoto('http://www.zeelandnet.nl/prikbord/images/upload/6/advertentie_foto1306925-3.jpg');" src="http://www.zeelandnet.nl/prikbord/images/upload/6/spotlight_foto1306925-3.jpg" alt="" border="0" class="small_Foto"></td>

</tr></table>

</body>
</html>

kickinhard
%Europe/Berlin %439 %2007, 11:33
Ik weet niet of dat helemaal het juiste is wat ik moet hebben. Ik heb zelf nog wat zitten klooien en ben hieruit gekomen, het werkt overigens nog niet helemaal.

// JavaScript Document

function rollOver(kleur){

d = document.getElementById;

//verberg
d('sfeerfotoKlein').style.display = 'none';
d('content').style.display = 'none';

//vertoon
d('sfeerfotoEmpty').style.display = 'block';

if (kleur == blauw){
d('content_container').style.background = "url('../../images/sfeerfoto/groot/sfeergroot_1.jpg')";
}else{

if (kleur == groen){
d('content_container').style.background = "url('../../images/sfeerfoto/groot/sfeergroot_2.jpg')";
}else{

if (kleur == bruin){
d('content_container').style.background = "url('../../images/sfeerfoto/groot/sfeergroot_3.jpg')";
}else{

if (kleur == oranje){
d('content_container').style.background = "url('../../images/sfeerfoto/groot/sfeergroot_4.jpg')";
}

}

function rollOut(kleur){
d = document.getElementById;

// en weer terug
d('sfeerfotoKlein').style.display = 'block';
d('content').style.display = 'block';

// verberg
d('sfeerfotoEmpty').style.display = 'none';

}

Op de buttons heb ik dan het volgende:

<div class="menu oranje">
<div class="menu_items">
<div class="kop"><h1>Nieuwe vacatures</h1></div>
<ul>
<li><a href="/content/nieuwe_vacatures/interim.php" onmouseover="rollOver(oranje);" onmouseout="rollOut(oranje);">Interim</a></li>
<li><a href="/content/nieuwe_vacatures/vast.php" onmouseover="rollOver(oranje);" onmouseout="rollOut(oranje);">vast</a></li>
</ul>
</div>
</div>

Alleen ben ik zelf een totale javascript noob.. moet ik nu die kleuren nog als variabelen opgeven of herkent ie ze meteen uit de javascript functie? of moet ik bijvoorbeeld nog zoiets als:

var oranje = .....;

???

voskuh
%Europe/Berlin %445 %2007, 11:41
Gelukkig ben ik ook een redelijk javascript noob, dus dat scheelt :D

Maar ik denk dat onderstaande met een beetje klooien wel kan gaan werken
Verander de bovenste regel, wanneer je de functie gaat declaren. En de if-statement.


function rollOver(kleur){


if (kleur == 'blauw'){

kickinhard
%Europe/Berlin %454 %2007, 11:54
Ik heb het geprobeerd maar hij geeft nog steeds de fout dat de kleur niet gedefinieerd is.
Er moet dus een andere oplossing zijn..

voskuh
%Europe/Berlin %473 %2007, 12:21
Ik heb er nog even naar gekeken, maar ik kan je helaas niet verder helpen ;)

BernardV
%Europe/Berlin %486 %2007, 12:40
Je moet het wel als string sturen, anders is het een undefined variabele:
onmouseover="rollOver('oranje');"

kickinhard
%Europe/Berlin %500 %2007, 13:00
Ik heb het aangepast maar krijg nu de volgende melding:


uncaught exception:
[Exception... "Illegal operation on WrappedNative prototype object"
nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"
location: "JS frame :: http://flevumps.intrige.eu/script/js/buttons.js :: rollOver :: line 9" data: no]

BernardV
%Europe/Berlin %526 %2007, 13:37
Dit kan ook niet:
d = document.getElementById;
d('sfeerfotoKlein').style.display = 'none';

Maak overal gewoon document.getElementById van...

En ook maak je zulke vergelijkingen:
if (kleur == blauw){
Dat gaat ook niet werken want blauw is niet bekend, dus dat moet ook een string zijn:
if (kleur == 'blauw'){

kickinhard
%Europe/Berlin %564 %2007, 14:32
Dank je wel dank je wel dank je wel!!!!

Inderdaad, je had gelijk, ik heb de veranderingen toegepast en nog een paar kleine dingen veranderd en het werkt nu perfect!

Dit is de javascript nu geworden:

function rollOver(kleur){

//verberg
document.getElementById('sfeerfotoKlein').style.di splay = 'none';
document.getElementById('content').style.display = 'none';

//vertoon
document.getElementById('sfeerfotoEmpty').style.di splay = 'block';

if (kleur == 'blauw'){
document.getElementById('content_container').style .background = "url('../../images/sfeerfoto/groot/sfeergroot_1.jpg') no-repeat top right";
}
else if (kleur == 'groen'){
document.getElementById('content_container').style .background = "url('../../images/sfeerfoto/groot/sfeergroot_2.jpg') no-repeat top right";
}
else if (kleur == 'bruin'){
document.getElementById('content_container').style .background = "url('../../images/sfeerfoto/groot/sfeergroot_4.jpg') no-repeat top right";
}
else if (kleur == 'oranje'){
document.getElementById('content_container').style .background = "url('../../images/sfeerfoto/groot/sfeergroot_3.jpg') no-repeat top right";
}
}

Het is tijdelijk te zien op: http://flevumps.intrige.eu
Wanneer de site klaar is zal ie te zien zijn op http://www.flevumps.nl