Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1841 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] [javascript] superposition d'images

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] [javascript] superposition d'images

n°791114
houam3012
Au pays des chauve souris
Posté le 09-07-2004 à 04:08:45  profilanswer
 

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"
mood
Publicité
Posté le 09-07-2004 à 04:08:45  profilanswer
 

n°791204
fxoxo
Posté le 09-07-2004 à 09:53:57  profilanswer
 

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 ...

n°792274
houam3012
Au pays des chauve souris
Posté le 10-07-2004 à 06:31:33  profilanswer
 

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"

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] [javascript] superposition d'images

 

Sujets relatifs
[Résolu] [Ecommerce] [Tomcat - config] [Libriaries jar] Servlet AtosIntToStr[resolu]
Recherche dll pour traitement d'images (modification de dpi)[PHP][Résolu] Probleme avec getdate() et le mois d'octobre !
[Resolu] Est-il possible de récuperer la valeur d'un input désactivé ?[MySQL] Pb de requete [Resolu]
Grille (border="1") tableau en xhtml ? [Resolu][html/php] probleme de passage a la ligne dans un champ text [RESOLU]
[CSS] Comment éviter de tel chose si horrible ?! [Résolu][php] récupérer l'url et les paramètres [résolu]
Plus de sujets relatifs à : [RESOLU] [javascript] superposition d'images


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR