login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dropdown lijst + image swap

Offline dbe123 - 13/11/2008 11:03 (laatste wijziging 13/11/2008 11:05)
Avatar van dbe123Lid Hoi,

Ik zou graag een dropdown-lijst maken, die wanneer men over een option gaat met de muisaanwijzer, een image gaat swappen ergens op de HTML-pagina.

Ik heb al veel tutorials op het net gevonden, maar slaag er niet in om ze bij mij te realiseren: ofwel zijn ze niet compleet wat ik zoek, ofwel krijg ik ze niet aan de praat.

De code die ik tot nu toe heb is de volgende:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script language="JavaScript" type="text/JavaScript">
  6. <!--
  7. function MM_preloadImages() { //v3.0
  8.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  9.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  10.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  11. }
  12. //-->
  14. </head>
  15.  
  17. <font face="Arial, Helvetica, sans-serif"> 
  18. <table width="90%" border="1" cellpadding="2" id="products">
  19.   <tr> 
  20.     <td colspan="3" align="center" valign="middle"> 
  21.       <div align="center"><img src="blank.jpg" name="blank" width="200" height="200" id="blank"></div></td>
  22.   </tr>
  23.   <tr> 
  24.     <td width="33%"> <div align="center"><strong>Digital B&amp;W Copiers</strong></div></td>
  25.     <td width="33%"></td>
  26.     <td width="33%"></td>
  27.   </tr>
  28.   <tr> 
  29.     <td width="33%"> <div align="center"> 
  30.         <select name="digBWcop" id="digBWcop">
  31.           <option selected>Please select from below.......</option>
  32.           <option onMouseOver="document.blank.src='machines/prod1.jpg'" onMouseOut="document.blank.src='blank.jpg'">PRODUCT 1</option>
  33.         </select>
  34.       </div></td>
  35.     <td width="33%"> <div align="center"></div></td>
  36.     <td width="33%"> <div align="center"></div></td>
  37.   </tr>
  39. </font>
  40. </body>
  41. </html>


Dit wil dus niet werken...  
Ik zie niet wat er mis gaat...

Kan er iemand helpen?

Dus de afbeelding "blank.jpg" moet swappen wanneer er een onMouseOver-event gestart wordt vanuit de <option> tag.

Ik hoop dat er iemand me op weg kan zetten.
Thanks!

15 antwoorden

Gesponsorde links
Offline Ontani - 13/11/2008 11:07
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 het gemakkelijkste is om te werken met:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('blank').src = 'machines/prod1.jpg';
Offline MiST - 13/11/2008 11:10 (laatste wijziging 13/11/2008 11:11)
Avatar van MiST Lid Het is volgens mij eleganter om het met nen functie aan te pakken.

Dus doe iets als het volgende

ergens zet je een <img> met id="swappableImg"

en dan een javascriptje

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function swapImage(newImage)
  2. {
  3.     var img = document.getElementById('swappableImg');
  4.     img.setAttribute('src', $newImage);
  5. }


in de onMouseOver zet je dan OnMouseOver="swapImage('url/to/image')"

Duidelijk?

Zou moeten werken... 

EDIT: Deamn, ontani was me voor
Offline dbe123 - 13/11/2008 11:17
Avatar van dbe123 Lid Hey,

Thanks voor de snelle reactie...

Kan ik het JavaScriptje in de header van de HTML-pagina plaatsen, of moet dit in een extern bestand?
Offline Ontani - 13/11/2008 11:21
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 kan beide
Offline dbe123 - 13/11/2008 11:35
Avatar van dbe123 Lid
MiST schreef:
Het is volgens mij eleganter om het met nen functie aan te pakken.

Dus doe iets als het volgende

ergens zet je een <img> met id="swappableImg"

en dan een javascriptje

[..code..]

in de onMouseOver zet je dan OnMouseOver="swapImage('url/to/image')"

Duidelijk?

Zou moeten werken... 

EDIT: Deamn, ontani was me voor


Ik heb het even geprobeerd, echter zonder positief resultaat. 
De afbeelding wordt niet vervangen in de browser (ik gebruik IE 6.0, met SP2).

De code ziet er nu als volgt uit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7. <!--
  8. function MM_preloadImages() { //v3.0
  9.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  10.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  11.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  12. }
  13. //-->
  14.  
  15. <!--
  16. function swapImage(newImage){    
  17. 	var img = document.getElementById('blank');    
  18. 	img.setAttribute('src', $newImage);
  19. }
  20. //-->
  22. </head>
  23.  
  25. <font face="Arial, Helvetica, sans-serif"> 
  26. <table width="90%" border="1" cellpadding="2" id="products">
  27.   <tr> 
  28.     <td colspan="3" align="center" valign="middle"> 
  29.       <div align="center"><img src="blank.jpg" name="blank" width="200" height="200" id="blank"></div></td>
  30.   </tr>
  31.   <tr> 
  32.     <td width="33%"> <div align="center"><strong>Digital B&amp;W Copiers</strong></div></td>
  33.     <td width="33%"> <div align="center"></div></td>
  34.     <td width="33%"> <div align="center"></div></td>
  35.   </tr>
  36.   <tr> 
  37.     <td width="33%"> <div align="center"> 
  38.         <select name="digBWcop" id="digBWcop">
  39.           <option selected>Please select from below.......</option>
  40.           <option onMouseOver="swapImage('machines/prod1.jpg')" onMouseOut="swapImage('blank.jpg')">PRODUCT 1</option>
  41.         </select>
  42.       </div></td>
  43.     <td width="33%"> <div align="center"></div></td>
  44.     <td width="33%"> <div align="center"></div></td>
  45.   </tr>
  47. </font>
  48. </body>
  49. </html>


Enig idee??  
Offline Rens - 13/11/2008 11:51
Avatar van Rens Gouden medaille

Crew algemeen		 Hmmz, je zet een $ voor je variabele.
Voor zover ik weet hoeft dat in JavaScript niet...
Offline dbe123 - 13/11/2008 11:55 (laatste wijziging 13/11/2008 16:08)
Avatar van dbe123 Lid
Rens schreef:
Hmmz, je zet een $ voor je variabele.
Voor zover ik weet hoeft dat in JavaScript niet...


Thanks voor de reply, maar na het verwijderen van de $ werkt het nog steeds niet.  

Ik ben echt niet vertrouwd met JavaScript...  

EDIT: Na nog wat Google-speurwerk, nog steeds geen oplossing gevonden.
Ik word wat wanhopig...  

EDIT 2: Ik heb vastgesteld dat bovenstaande code werkt, op de bovenliggende <select>-tag, de bedoeling is echter dat het op de <option>-tag werkt, en dit lukt me niet. Suggesties iemand?
Offline MiST - 13/11/2008 19:03
Avatar van MiST Lid oeps, idd, $ voor de var... macht der gewoonte, PHP rockt gewoon! 
Offline dbe123 - 14/11/2008 09:49
Avatar van dbe123 Lid Nobody?
Offline Erwt - 14/11/2008 09:56 (laatste wijziging 14/11/2008 10:05)
Avatar van Erwt PHP beginner Plaatscode: http://plaatscode.be/36109/

Ik denk dat het was omdat je doet getElementById.. maar dan moet je wel een id meegeven  
Offline dbe123 - 14/11/2008 10:37 (laatste wijziging 14/11/2008 10:47)
Avatar van dbe123 Lid Ik vond dit op de MSDN site van Microsoft:

http://forums.m...p;SiteID=1

@ Erwt:
Thanks voor de bijdrage, maar nog steeds geen oplossing.
Ik denk echt dat het een compabiliteitsprobleem met Internet Explorer is.
Offline Erwt - 14/11/2008 14:54
Avatar van Erwt PHP beginner Ahh sorry niet naar gekeken, ik ging direct van FireFox uit.
Offline dbe123 - 14/11/2008 15:50 (laatste wijziging 16/11/2008 10:07)
Avatar van dbe123 Lid
Erwt schreef:
Ahh sorry niet naar gekeken, ik ging direct van FireFox uit.


Geen probleem...  
Ik WOU dat het Firefox was, maar het moet IE compatible zijn (spijtig genoeg).  

Ik hoop dat iemand nog het licht ziet schijnen... Ikzelf ben ten einde raad.  

EDIT: Kan DHTML geen uitweg bieden?  
Offline Erwt - 18/11/2008 16:11
Avatar van Erwt PHP beginner Ik heb 't even nagekeken voor je en de enigste uitweg is je eigen dropdown lijst te maken.

klik

Een andere optie is er voor IE helaas niet.

Veel succes nog.
Offline dbe123 - 21/11/2008 14:24 (laatste wijziging 15/12/2008 13:29)
Avatar van dbe123 Lid Ik heb via Google een kant en klaar script gevonden die me toelaat images te laten swappen.

Hieronder de code:
HEAD
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. <!--
  3.  
  4. /*Combo Box Image Selector:
  5. By JavaScript Kit (www.javascriptkit.com)
  6. Over 200+ free JavaScript here!
  7. */
  8.  
  9. function showimage()
  10. {
  11. if (!document.images)
  12. return
  13. document.images.pictures.src=
  14. document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
  15. }
  16. //-->
  17. </script>


BODY
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <table border="0" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td width="100%"><form name="mygallery"><p>
  4. <select name="picture" size="1" onChange="showimage()">
  5. <option selected value="me.gif">Picture of me</option>
  6. <option value="myaunt.gif">Picture of my aunt</option>
  7. <option value="brother.gif">Picture of my brother</option>
  9. </p>
  10. </form>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td width="100%"><p align="center"><img src="me.gif" name="pictures" width="99" height="100"></td>
  15. </tr>


Deze code werkt perfect, maar geeft me nog één klein probleem.  
De afbeeldingen worden perfect vervangen, maar ik kan de afbeelding niet aanklikken om naar een URL te navigeren.
Met andere woorden, hoe plaats ik een Hyperlink achter deze image? Normaal gaat dit, bij een dropdown, via de "value"-tag, maar deze wordt in dit script gebruikt om de image weer te geven.

Iemand een idee?  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.217s