Déplacer du texte au clique sur une image
Résolu
rirera
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
Bonjour je m'appelle quentin,
Je vous contact aujourd'hui car je n'arrive pas à réaliser et contrôler correctement mes élements en java script. J'ai à se jour lu le tuto sur openclassroom, et lu pas mal de pages depuis google.
Je doit faire quelque chose de mal car rien ne bouge....
Mon texte reste à sa position initial
merci pour votre aide, j'ai posté ci-dessous les parties de mon codes qui correspondent au problème, si vous avez 2 minutes pour le lire vous ferez de moi un homme heureux
Page .html:
<div id="textemail"><a><b>xxxxxxxx@xxxxxx.xx</b></a></div>
<input id="mail" type="image" src="images/logomail.png" height="30" />
toujours dans la page .html le code java script:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script language="JavaScript">
$("#mail").ready(function($){
$("#mail").click(function(e){
document.getElementById("textemail").style.top='570px';
});
}
</script>
Page CSS:
//mon texte
#textemail{
display : inline-block; position: fixed;left: 145px; top: -200px;
font-family: Helvetica, serif; line-height: 7px; font-size: 12px; color: black;}
//Je souhaite donc changer la position -200px en une position sur l'écran.
//mon image
#mail{
display : inline-block; position: fixed;left: 100px; top: 550px;}
D'ailleurs si quelqu'un à une idée autre pour réalisé cette astuce je suis ouvert
Merci
Je vous contact aujourd'hui car je n'arrive pas à réaliser et contrôler correctement mes élements en java script. J'ai à se jour lu le tuto sur openclassroom, et lu pas mal de pages depuis google.
Je doit faire quelque chose de mal car rien ne bouge....
Mon texte reste à sa position initial
merci pour votre aide, j'ai posté ci-dessous les parties de mon codes qui correspondent au problème, si vous avez 2 minutes pour le lire vous ferez de moi un homme heureux
Page .html:
<div id="textemail"><a><b>xxxxxxxx@xxxxxx.xx</b></a></div>
<input id="mail" type="image" src="images/logomail.png" height="30" />
toujours dans la page .html le code java script:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script language="JavaScript">
$("#mail").ready(function($){
$("#mail").click(function(e){
document.getElementById("textemail").style.top='570px';
});
}
</script>
Page CSS:
//mon texte
#textemail{
display : inline-block; position: fixed;left: 145px; top: -200px;
font-family: Helvetica, serif; line-height: 7px; font-size: 12px; color: black;}
//Je souhaite donc changer la position -200px en une position sur l'écran.
//mon image
#mail{
display : inline-block; position: fixed;left: 100px; top: 550px;}
D'ailleurs si quelqu'un à une idée autre pour réalisé cette astuce je suis ouvert
Merci
A voir également:
- Déplacer du texte au clique sur une image
- Déplacer une colonne excel - Guide
- Extraire texte d'une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Légender une image - Guide
- Image iso - Guide
1 réponse
Hello,
Je vois quelques trucs qui ne vont pas:
<script language="JavaScript">
-->
<script type="text/javascript"">
___________________________
$("#mail").ready(function($){
$("#mail").click(function(e){
document.getElementById("textemail").style.top='570px';
});
}); <---- fonction mal fermée !
De plus, tu utilise une version de jQuery largement dépassée...
Je t'ai remis ton code au propre, voici:
Je vois quelques trucs qui ne vont pas:
<script language="JavaScript">
-->
<script type="text/javascript"">
___________________________
$("#mail").ready(function($){
$("#mail").click(function(e){
document.getElementById("textemail").style.top='570px';
});
}); <---- fonction mal fermée !
De plus, tu utilise une version de jQuery largement dépassée...
Je t'ai remis ton code au propre, voici:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#mail").ready(function($){
$("#mail").click(function(e){
document.getElementById("textemail").style.top='570px';
});
});
</script>
<style type="text/css">
#textemail{
display : inline-block;
position: fixed;
left: 145px;
top: -200px;
font-family: Helvetica, serif;
line-height: 7px;
font-size: 12px; color: black;
}
#mail{
display : inline-block;
position: fixed;
left: 100px;
top: 550px;
}
</style>
</head>
<body>
<div id="textemail"><a><b>xxxxxxxx@xxxxxx.xx</b></a></div>
<input id="mail" type="image" src="http://placehold.it/80x80" />
</body>
<html>
Peut être remplacé, grâce a jQuery par:
$('#textemail').css('top', 570);