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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  javaScript et balise <area> pour rendre visible une div

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

javaScript et balise <area> pour rendre visible une div

n°1775134
begin
Posté le 20-08-2008 à 19:40:16  profilanswer
 

Bonjour à tous!  
 
J'ai une page html, avec deux images superposées image1 et image2. image1 au début ne possède pas d'attribut src car je la veut transparente. Suivant le clic sur l'une des petites photos présentes sur image2 je souhaite que image1 apparaisse avec la petite photo.  
 
J'ai essayé de caché image1 tant qu'on a pas cliqué sur une photo(ce qui complique la chose c'est que les photos ne sont pas des liens <a> mais des <area> )
 
Voici le code javascript
 
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none" )
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
 
voici la partie html
 
<div id="id_div_1" style="display:none;">
 
<img id="zoneimage" src="" style="display:block; position:absolute; left:220px; top:99px; width:500px; height:300px; z-index:1; " width="137" height="132" onclick="javascript:visibilite('id_div'_1); return false;">
 
</div>
 
mais ça ne fonctionne pas. image1 est invisible mais un clic sur une photo ne le rend pas visible.
Ensuite j'essaie de faire l'opération inverse, au début image 1 est visible et un click sur lui même doit le rendre invisible.
 
J'ai cherché partout mais les autres utillisent des liens pour conditions du genre
 
<a href="javascript:cacheId('contenu');">Fermer</a>
 
mais ça ne correspond pas à mon travail.
 
S.O.S :??:  
 
Merci pour votre attention


---------------
Merci pour votre aide
mood
Publicité
Posté le 20-08-2008 à 19:40:16  profilanswer
 

n°1775141
mIRROR
Chevreuillobolchévik
Posté le 20-08-2008 à 20:42:55  profilanswer
 

oops j ai lu trop vite
tu fais un onclick sur une image qui n existe pas
donc tu ne pourras jamais capter le onclick dessus

 

fais plutot un switch sur opacity que sur display
genre au depart ton image est a opacité:0
comme ca elle prend la bonne taille et tu peux capter l evenement onclick
et la tu fous l opacity a 1


Message édité par mIRROR le 20-08-2008 à 20:46:12

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1775274
begin
Posté le 21-08-2008 à 07:55:36  profilanswer
 

Merci pour ton aide c'est sympa  
finalement j'ai opté pour une image transparente que j'ai crée sous photoshop j'ai mis un onclick dans ma balise img  
 
<img id="image1" src="./image1.jpg" alt="photo1"  style="width:93px; height:69px;" onclick="javascript:ouvreimage1()">
 
un problème persiste cela ne fonctionne pas sous ie :-(
 
Re SOS lol
 
Merci pour votre aide


Message édité par begin le 21-08-2008 à 09:15:32
n°1775352
mIRROR
Chevreuillobolchévik
Posté le 21-08-2008 à 10:23:58  profilanswer
 

un jpg transparent hein?
fais voir le js


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1775408
begin
Posté le 21-08-2008 à 11:35:06  profilanswer
 

En faite c'est un .gif; Le code javascript est  
 
function ouvreimage1() {
       // ouvre l'image sur le premier plan de la page à partir du click sur une des photos dans le bandeau
       onclick = document.getElementById('zoneimage').innerHTML='<img src="image1.jpg"  />';
       
       }  
 
La partie html:
 
-de la photo qui est le lien pour changer transparent.gif en image1.jpg dans image1
 
<img id="image1" src="./image1.jpg" title="image 1"  style="width:93px; height:69px;" onclick="ouvreimage1();return false;">
 
- de l'image1
 
<img id="zoneimage" src=" " style="display:block; position:absolute; left:220px; top:121px; width:500px; height:300px; z-index:1; "  onclick="javascript:transparent()">
 
voilà
 
Merci.


Message édité par begin le 21-08-2008 à 11:36:30
n°1775424
mIRROR
Chevreuillobolchévik
Posté le 21-08-2008 à 12:27:50  profilanswer
 

ok c est un peu n importe quoi tout ca
ta fonction ouvreImage se lance deja sur un onclick donc pas besoin de le preciser dans ta fonction surtout que ca ne se lance pas du tout comme ca
si tu fais onclick = blabla;
javascript attend de blabla que ce soit une reference a une fonction
la tu essaies de foutre une fonction inline...ca fait deux = sur la meme ligne ca plante
et ca pointe vers aucun objet connu de ton script ca replante
et si jamais ca avait fonctionné ca aurait lancé le onclick sur l objet window (donc en cliquant n importe ou sur ta page)  ...
et un petit dernier pour la route: tu fais un innerHTML sur une image donc ca rereplante

Code :
  1. function ouvreimage1() {
  2.       // ouvre l'image sur le premier plan de la page à partir du click sur une des photos dans le bandeau
  3.       document.getElementById('zoneimage').src="image1.jpg";
  4.      
  5.       }


ca devrait aller beaucoup mieux comme ca :D
 
sinon j ai toujours pas compris ce que tu veux fire et y a peut etre plus simple... un petit schema?


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1775425
begin
Posté le 21-08-2008 à 12:32:06  profilanswer
 

Désolé dans la précipitation j'ai mal expliqué. J'ai "image 2" en background de ma page html, sur le head: des photos sur une bande en petite taille dans une div, puis sous cette div une image1 toujours sur image2 qui conctient l'image en grand de la petite photo sur laquelle on a cliqué. En cliquant à nouveau sur la zone image grandie cela renvoie une image transparent.gif afin que l'utilisateur revoie le background.
 
<div id="conteneur" style="position:absolute; ">
   
    <!-- les images du bandeau -->
    <div style="display:block; position:absolute; left:112px; top:30px; z-index:1; width:760px; height:69px;">
   
    <img id="image1" src="./image1.jpg" title="photo1"  style="width:93px; height:69px;" onclick="ouvre_image('zoneimage','image1.jpg')">&nbsp;&nbsp;&nbsp;
    <img id="image2" src="./image1.jpg" title="photo1"  style="width:93px; height:69px;" onclick="ouvre_image('zoneimage','image2.jpg')">&nbsp;&nbsp;
    <img id="image3" src="./image3.jpg" title="photo 3"  style="width:93px; height:69px;" onclick="ouvre_image('zoneimage','image3.jpg')">&nbsp;&nbsp;
   
    </div>
 
<!-- définition de la zone image où celles ci s'ouvriront en grand -->
    <img id="zoneimage" src=" " style="display:block; position:absolute; left:220px; top:121px; width:500px; height:300px; z-index:1; "  onclick="javascript:transparent()">
 
  <--le background-image -->
   
    <img src="./test.jpg" usemap="#map" alt="Site CMRS" border=0 />
    </div>
 
Les fonctions javascript sont dans un fichier externe dont le lien est dans le head et les voici:
 
function ouvre_image(image, photo)
{
document.getElementById(image).innerHTML='<img src="'+photo+'" alt="photo"/>';
}
 
function transparent()
{                            
    // ouvre l'image transparent
    onclick = document.getElementById('zoneimage').innerHTML='<img src="transparent.jpg"  />';                            
}    
 
Tout est nickel sous firefox mais  rien ne répond sous ie, c'est la néant.
 
Merci pour ta patience.

n°1775462
mIRROR
Chevreuillobolchévik
Posté le 21-08-2008 à 13:34:37  profilanswer
 

j ai pas encore tout compris mais ca me semble desastreux
ton image en background c est test.jpg?
pourquoi une map ?
 
mais en gros vla une petite page de test

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3.    <head>
  4.        <title></title>
  5.        <style>
  6.             #gallery {background:url(test.jpg);}
  7.             #gallery div img {width:93px;height:69px;}
  8.             #target {width:500px;height:300px;visibility:hidden;}
  9.        </style>
  10.         <script>
  11.             onload = function() {
  12.                 var thumbs = document.getElementById('gallery').getElementsByTagName('img');
  13.                 var target = document.getElementById('target');
  14.                 for(var i=0;i<thumbs.length;i++) {
  15.                     thumbs[i].onclick = function() {
  16.                         target.src = this.src;
  17.                         target.style.visibility = "visible";
  18.                     }
  19.                 }
  20.                 target.onclick = function() {
  21.                     target.style.visibility = "hidden";
  22.                 }
  23.             }
  24.         </script>
  25.    </head>
  26.    <body>
  27.        <div id="gallery">
  28.            <div>
  29.                 <img src="image1.jpg">
  30.                 <img src="image2.jpg">
  31.                 <img src="image3.jpg">
  32.            </div>
  33.            <img id="target" src="image1.jpg">
  34.        </div>
  35.    </body>
  36. </html>


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
n°1775488
begin
Posté le 21-08-2008 à 14:09:45  profilanswer
 

Merci 1000 fois c'est ce que je cherchai!!! :-)
Je l'ai adapté à mon code et ça fonctionne
c'est nickel!
C'est vrai que ton exemple ne donne pas quelque chose de très esthétique lol mais moi, je ne fais que répondre à la demande; lol ;-)
 
MERCI encore.
 
P.S: si ça te gêne vraiment pas pourrais tu me commenter le code stp?
 
@+

n°1775497
mIRROR
Chevreuillobolchévik
Posté le 21-08-2008 à 14:32:53  profilanswer
 

loul le coté esthetique c est un peu ton job quand meme
c est juste quelques lignes de css ca devrait pas etre trop compliqué
le script lui fonctionne tout seul tu peux rajouter dix images ca marchera tout aussi bien
et le javascript commenté (en esperant que le reste n ait pas besoinde l etre)

Code :
  1. onload = function() {
  2.                 // on identifie la cible
  3.                 var target = document.getElementById('target');
  4.                 
  5.                 // on choppe toutes les vignettes
  6.                 var thumbs = document.getElementById('gallery').getElementsByTagName('img');
  7.                 for(var i=0;i<thumbs.length;i++) {
  8.                     // pour chacune des vignettes on associe un evenement  onclick
  9.                     thumbs[i].onclick = function() {
  10.                         // on remplace la source de la cible par celle de l imge sur laquelle on vient de cliquer
  11.                         target.src = this.src;
  12.                         
  13.                         // on rend la cible visible
  14.                         target.style.visibility = "visible";
  15.                     }
  16.                 }
  17.                 
  18.                 // quand on clique sur la cible on la cache
  19.                 target.onclick = function() {
  20.                     target.style.visibility = "hidden";
  21.                 }
  22.             }


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

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

  javaScript et balise <area> pour rendre visible une div

 

Sujets relatifs
[Résolu]Modifier Menu contextuel clic droit javascript/html[JTable] Est-il possible de rendre les cellules d'un JTable "cliquable
[résolu] pb fonctions javascriptRendre un champ cliquable
Java - Afficher un graphe et rendre interactifModifier deux balise avec innerhtml
Image qui change en fonction position souris (Map Area + JS et/ou CSS)Recherche javascript "similaire popup"
chargement flash en javascript + cachejavascript dans flash
Plus de sujets relatifs à : javaScript et balise <area> pour rendre visible une div


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