Combinatie 3 Javascripts

Status
Niet open voor verdere reacties.
L

lennom

Gebruiker
Lid geworden
1 jul 2008
Berichten
31
Dag Allemaal,

Ik heb de volgende 3 javascripts toegepast op 1 afbeelding:

- overvloeien (van blauw naar oranje)
- lightbox (afbeelding opent in een lightbox venster)
- rollover (bij een mouseover wordt er een foto getoond).

Het werkt allemaal aardig, zie:
http://www.sorleon.nl/voorbeeld/index.html

Het enige probleem waar ik tegenaan loop is het feit dat de rollover alleen werkt bij de blauwe kleur.
Heeft iemand enig idee hoe ik er voor kan zorgen dat ook bij de oranje kleur de rollover werkt?

De bestanden zitten als bijlage bijgesloten onderaan deze topic.
en dit is de code:

PHP: 
<!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=UTF-8" />
<title>Test</title>

<script type="text/javascript" src="overvloeier2.js"></script>
<script type="text/javascript">
function init() {

parameters('divnaam', 50, 2000, 'bijschrift');
}

// parameters('id', snelheid, pauze,'tekst')
window.onload = init;
</script>


<style type="text/css">
.faden img {
opacity: 0;
-moz-opacity: 0;
-khtml-opacity:0;
filter: alpha(opacity=0);
}
</style>
</script>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url();
    background-repeat: no-repeat;
}
-->
</style></head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="16">
 
 <tr>
    <td height="220" valign="top"><a href="beelden/presentatie.jpg" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','beelden/foto.jpg',1)" rel="lightbox" >
<div id="container" align="center">
            <div class="faden" id="divnaam" style="width: 200px; height: 200px; position: relative;"><img src="beelden/blauw.jpg" alt="johnfrieda" name="Image1" width="200" height="200" border="0" id="Image1" /><img src="beelden/oranje.jpg" alt="johnfrieda" name="Image2" width="200" height="200" border="0" id="Image2" /></div>
        <div id="bijschrift" style="position: relative; color: #FFFFFF; font-size: 1px; font-style: italic; width: 200px; text-align:center;z-index: 236;"></div>
        </div></a></td>    
  </tr>
</table>
</body>
</html>
 

Bijlagen

  • voorbeeld.zip
    96,5 KB · Weergaven: 12
Volgens mij zijn de blauwe en oranje afbeeldingen met z-index gestapeld. Als de blauwe doorzichtig wordt zie je oranje maar de mouseover is nog steeds van de blauwe. Als je dus de mouseover doet als ie oranje is wordt de blauwe afbeelding daadwerkelijk gemousedover (excuseer mijn termologie :)) terwijl ie onzichtbaar is.

Oplossing zou zijn de blauwe te verwijderen als ie onzichtbaar is en later weer terugzetten. Probeer eens de blauwe niet helemaal naar 0% transparantie te laten teruggaan, dan zul je waarschijnlijk zien dat ie over de oranje heen ligt en die dus blokkeert.

Een andere truuk is de blauwe als ie doorzichtig is 1x1 px maken.
 
MAX232 zei:
Volgens mij zijn de blauwe en oranje afbeeldingen met z-index gestapeld. Als de blauwe doorzichtig wordt zie je oranje maar de mouseover is nog steeds van de blauwe. Als je dus de mouseover doet als ie oranje is wordt de blauwe afbeelding daadwerkelijk gemousedover (excuseer mijn termologie :)) terwijl ie onzichtbaar is.

Oplossing zou zijn de blauwe te verwijderen als ie onzichtbaar is en later weer terugzetten. Probeer eens de blauwe niet helemaal naar 0% transparantie te laten teruggaan, dan zul je waarschijnlijk zien dat ie over de oranje heen ligt en die dus blokkeert.

Een andere truuk is de blauwe als ie doorzichtig is 1x1 px maken.
Klik om te vergroten...

bedankt voor je reactie Max!

Bij het veranderen van de transparantie(opacity) zie ik helaas maar weinig verschil.
nu moet ik er wel bij zeggen dat ik niet precies weet wat al die opacity instelling precies betekenen. En ik ben niet bepaald ervaren in het gebruik van javascripts :confused:

opacity: 0;
-moz-opacity: 0;
-khtml-opacity:0;
filter: alpha(opacity=0);
}


het is wel zo dat ik in de code zelf kan bepalen welke van de 2 afbeeldingen een rollover moet krijgen.

elke afbeelding heeft een "id"
- blauw id = "Image1"
- oranje id = "Image2"

vervolgens selecteer ik met deze code de afbeelding:
PHP: 
onmouseover="MM_swapImage('Image1','','beelden/foto.jpg',1)

ik hoopte eigenlijk dat een code zoals deze gewoon zou werken:
PHP: 
onmouseover="MM_swapImage('Image1','Image2','beelden/foto.jpg',1)

Maar "Image2" wordt dan nog steeds genegeerd.

Max, zou je de bestanden anders eens willen downloaden
en jou theorie willen toepassen?

ze zitten verpakt in een zip file'tje.
 
Hoi Lennom,

de aanpassingen van de transparantie zijn als volgt:

Code: 
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity:0.3;
filter: alpha(opacity=30);

Alles gaat in decimalen behalve MS Filters, die gaan in integers.

Wat betreft het aanpassen kom ik er wel uit maar dat is net iets teveel van het goede. Daar heb ik helaas echt geen tijd voor.

Ik snap dat je zelf kunt bepalen waar je rollovers aan geeft maar dat heeft helaas geen effect bij jouw probleem. Naast mijn eerdere workarounds kun je eventueel ook de rollover dynamisch aanpassen, dan lijkt het visueel volgens mij ook zoals je wilt.

Je kunt een zo rollover dynamisch toewijzen (voor het geval dat je dat nog niet weet :)):
Code: 
document.getElementById('id_van_element').rollover=function(){MM_swapImage('Image1','Image2','beelden/foto.jpg',1)}
Vergeet niet ook weer terug te wisselen.
 
MAX232 zei:
Hoi Lennom,

de aanpassingen van de transparantie zijn als volgt:

Code: 
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity:0.3;
filter: alpha(opacity=30);

Alles gaat in decimalen behalve MS Filters, die gaan in integers.

Wat betreft het aanpassen kom ik er wel uit maar dat is net iets teveel van het goede. Daar heb ik helaas echt geen tijd voor.

Ik snap dat je zelf kunt bepalen waar je rollovers aan geeft maar dat heeft helaas geen effect bij jouw probleem. Naast mijn eerdere workarounds kun je eventueel ook de rollover dynamisch aanpassen, dan lijkt het visueel volgens mij ook zoals je wilt.

Je kunt een zo rollover dynamisch toewijzen (voor het geval dat je dat nog niet weet :)):
Code: 
document.getElementById('id_van_element').rollover=function(){MM_swapImage('Image1','Image2','beelden/foto.jpg',1)}
Vergeet niet ook weer terug te wisselen.
Klik om te vergroten...

Ik kom er helaas echt niet uit. Ondanks het feit dat je het allemaal goed uitlegt Max.
Mijn javascript kennis is gewoon niet toereikend genoeg :confused:

Wanneer ik de transparantie instel zie ik geen verschil en het toepassen van een dynamische rollover geeft me eerder hoofdpijn dan een oplossing.

**edit** probleem is inmiddels via een andere weg opgelost **
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan