Fonction onMouseOver, comment faire ??

Résolu/Fermé
Utilisateur anonyme - 3 nov. 2012 à 12:03
 Utilisateur anonyme - 3 nov. 2012 à 16:53
Bonjour,

je voudrai faire quelque chose avec la fonction onMouseOver/Out. Le problème, c'est que j'ai réussi à le faire fonctionner à un moment mais je ne pouvais plus cliquer sur l'image pour accéder au téléchargement :/

Voilà se que je voudrai faire : juste dessous on va dire que c'est mon images

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

je voudrai passer la souris dessus et avoir un bouton "Télécharger" qui apparait par dessus mais sans cacher l'image comme ci-dessous

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||*****************||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||****Télécharger****|||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||| *****************|||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

et la on clique sur l'image et boom, ça télécharge !

Quelqu'un peut m'aider ?
A voir également:

9 réponses

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
Modifié par Nhay le 3/11/2012 à 12:07
Si tu le met par dessus, ça cachera forcément un bout de l'image :/
Mais sinon, tu prépare simplement ta div, sans fonds, avec ton bouton en display:none, au survol tu l'affiche, et un petit onclick sur l'image pour lancer ton téléchargement.

Tu rajoute la même fonction sur la div, et peut importe où l'utilisateur cliquera, le téléchargement se lancera.
0
Utilisateur anonyme
3 nov. 2012 à 12:11
mon bouton téléchargement c'est un image PNG (pour la transparence, qui fait la même taille que l'image de base (256*256)

mais quand je met une div ça me déplace l'image :/
0
mon code actuel c'est ça
    <p> 
    <a href="#"><img id="txt" align="left" src="images/maps/1944_beach.jpg" onMouseover="this.src'images/download_cursor.png'" onMouseout="this.src'images/maps/1994_beach.png'"></a> 
    <p>   
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
Modifié par Nhay le 3/11/2012 à 12:14
Met une position absolute sur ta div dans ce cas.
0
Utilisateur anonyme
3 nov. 2012 à 12:16
ok j'essaye de suite
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
3 nov. 2012 à 12:24
je viens de tester, et même en fixant DIV, j'ai des gros bugs !

si je te passe une parti du code, tu pense pouvoir me le faire ?
0
Utilisateur anonyme
3 nov. 2012 à 12:28
<div style="height: 600px; overflow: auto;" id="accordion">

<h2>1994 Beach</h2>

<div class="content">
<p>
<img id="txt" align="left" src="images/maps/1944_beach.jpg">
</p>
</div>

</div>
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
3 nov. 2012 à 12:49
Un truc comme ça devrait fonctionner :
<div style='position:absolute;display:none;top:50px;left:50px;' id="img_dl" onClick="telecharger();"><img src='/ton_image_bouton.png' /></div>
<img src='tonimage.png' onMouseOver="affich_image();" onMouseOut="cache_image();" onclick="telecharger();" />


<script>
function affich_image(){
bouton=document.getElementById("img_dl");
bouton.style.display="block";
}
function cache_image(){
bouton=document.getElementById("img_dl");
bouton.style.display="none";
}
function telecharget(){
//Mettre ta fonction.
}
</script>
0
Utilisateur anonyme
3 nov. 2012 à 13:26
Merci beaucoup mec ! seul bémol, c'est que l'image clignote, et si j'ai bien compris, il comme il faut que je répète cette action sur 35 images avec 35 liens différent, il faut que je créé 35 fonction telecharger ? :o
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
3 nov. 2012 à 13:36
Hum, nan, tu modifier la fonction télécharger pour récupérer le src de l'image cliquer.
Pareil pour les fonctions afficher/cacher, tu peut retrouve la position qu'il faut en prenant celle du curseur au moment du onmouseon, comme ça tu n'a qu'une div qui se déplacera au bonne endroit.
0
Utilisateur anonyme
3 nov. 2012 à 16:53
re, du coup avec cette méthode je n'ai pas réussi il y avait des bugs donc en fait j'ai créé toutes les images en doubles (une normale + son clone avec le bouton télécharger en plus).

Mais merci quand même !
0