[RESOLU] [javascript] superposition d'images

superposition d'images [RESOLU] [javascript] - HTML/CSS - Programmation

Marsh Posté le 09-07-2004 à 04:08:45    

Bonjour,
 
j'ai une image representant une carte d'Italie vierge. Autour de cette image se positionnent plusieurs liens vers differents itineraires.
 
L'idee est que quand je mets mon curseur au-dessus d'un lien l'image change pour une autre avec l'itineraire en plus. J'ai reussi a faire un truc qui fonctionne. Mais il y a 12 itineraires et donc au chargement de la page les 12 cartes sont chargees, ce qui rend l'affichage beaucoup trop lent.
 
Je sollicite votre avis pour savoir quelle est la meilleur solution pour rendre ma page plus rapide.
 
Ne sachant pas trop comment faire j'ai commence a imaginer autre chose (un peu barbare a mon gout mais au moins il y a moins de choses a charger a l'affichage):  
-l'image vierge constitue le fond d'un tableau,
- lorsque je "mouseover" un lien, une image transparente avec juste un trait representant mon itineraire se superpose sur la carte vierge, et crac j'ai mon itineraire sur ma carte. Ainsi j'ai une image de 9 k pour ma carte vierge et 12 autres de 1ko.  
Seulement tout ceci n'est que theorie puisque je n'arrive pas a superposer ma deuxieme image. Une idee?   :hello:  
 
Voici comment je vois le truc:

Code :
  1. <table ...background='images/cartevierge.jpg'>
  2.    <tr>   
  3.      <td ... background='images/uneimagetransparente.jpg'>
  4.         .
  5.         .
  6.         .
  7. </table>


 
puis mes liens:  

Code :
  1. <a
  2. onMouseOver="changeNIMap('imagetransparente', 'unitineraire')" onMouseOut="changeNIMap('unitineraire', ''imagetransparente')" href="http://www.monsite.com/amalfi-coast-tour.html">
  3. Amalfi Coast
  4. </a>


 
donc de base mon tableau a la carte vierge pour fond,
mon td a une image transparente par defaut (les 2 se superposent),
qd je mouseover un lien, l'itineraire vient prendre la place de l'image transparente.
Seulement je ne peux pas nommer mes images de fond de table et td!!
Si je pouvais ecrire:
<td ... name='imageIM' src='images/uneimagetransparente.jpg' >
 
et definir imageIM comme suit:
mapImageNI = new Image();
mapImageNI.src = "images/italymap.jpg";
 
mon probleme serait resolu.
 
 
EUh quelqu'un m'a suivi?   :??:  
 
Si oui peut il m'aider
 
Merci  :jap:


Message édité par houam3012 le 14-07-2004 à 03:18:17

---------------
"Étudiez comme si vous deviez vivre toujours; vivez comme si vous deviez mourir demain"
Reply

Marsh Posté le 09-07-2004 à 04:08:45   

Reply

Marsh Posté le 09-07-2004 à 09:53:57    

Commence par aller voir 2-3 tutos sur le xhtml et css
( http://openweb.eu.org/ , http://pompage.net/pompe/csspratique/ , http://www.alsacreations.com/articles/, http://incongru.webdynamit.net/LaNouvelleFaq ...)
et arréte d'utiliser des tableaux
, car ce que tu dis est faisable:
 
- Soit tu met plusieurs div en position absolue qui se superposent (et tu joue avec l'attribut display:none , block pour les rendres visibles)
 
 
- soit comme tu dis la  

houam3012 a écrit :


Si je pouvais ecrire:
<td ... name='imageIM' src='images/uneimagetransparente.jpg' >
 
et definir imageIM comme suit:
mapImageNI = new Image();
mapImageNI.src = "images/italymap.jpg";


 
Tu peux l'ecrire ...
ton div avec l'image de fond
<div style="background-image:url(images/cercle_off.gif);" id="toto">
 
le js
document.getElementById('toto').style.backgroundImage ='url(images/cercle_ok.gif)';
 
Et il y à encore d'autre facon ...

Reply

Marsh Posté le 10-07-2004 à 06:31:33    

Ces sites sont une vraie mine d'or!! merci, je savais que les tableaux n'etaient pas la panacee mais je ne voyais pas comment y remedier totalement.
Je vais essayer tes idees! merci.


---------------
"Étudiez comme si vous deviez vivre toujours; vivez comme si vous deviez mourir demain"
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed