Rajouter du texte sur des images via javascript, est-ce possible ?

Bonjour,

Je me permets de vous poser ici une question certainement idiote.

Mais avant je vous expose mon problème.
J'élabore actuellement un site de test avant publication pour un club de foot.
Mon idée est de faire des menus facilement utilisable sur des téléphones mobiles. (Pour des convocations de foot).
Pour cela j'ai dans un premier temps utiliser CSS avec une image qui change de couleur (ainsi que le texte qui se trouve dessus) au passage de la souris.
Dans les navigateurs des pcs ou tablettes cela fonctionne très bien.
Par contre sur les mobiles les images n’apparaissent pas, seulement les liens.
Or il est important pour moi que cela soit lisible et convivial avec les versions mobiles au vu du public concerné. Malheureusement je ne peux modifier la version css mobile.

Donc je me suis rabattu sur du javascript, même si cela semble mois simple (notamment au niveau des images).
En effet je n'ai plus une seule image générique mais une image pour chaque bouton car je ne sais pas comment rajouter du texte sur une image via onmouseover/onmouseout.
Du coup j'ai autant d'images que de boutons créés.

Donc voilà ma question : est-il possible de rajouter du texte sur une image depuis un script faisant appel à la fonction onmouseover.

En espépant que ma demande soit clairement exprimée.

Cordialement
Alain

PS: Voici un extrait du code que j'utilise actuellement.

<p style="text-align: center;"><a href="convocations/ecole-de-foot/u7"><img onmouseout="this.src='http://files.testfoot.webnode.fr/200000122-89b628ab09/Ecole-de-Foot_off.jpg'" onmouseover="this.src='http://files.testfoot.webnode.fr/200000123-c73bac83a5/Ecole-de-Foot_on.jpg'" src="http://files.testfoot.webnode.fr/200000122-89b628ab09/Ecole-de-Foot_off.jpg" style="border-width: 0px; border-style: solid; width: 160px; height: 40px;"></a></p>
<p style="text-align: center;"><a href="convocations/u15/"><img onmouseout="this.src='http://files.testfoot.webnode.fr/200000126-84d3785cf4/U15_off.jpg'" onmouseover="this.src='http://files.testfoot.webnode.fr/200000127-c1629c354b/U15_on.jpg'" src="http://files.testfoot.webnode.fr/200000126-84d3785cf4/U15_off.jpg" style="border-width: 0px; border-style: solid; width: 160px; height: 40px;"></a></p>
<p style="text-align: center;"><a href="convocations/u17/"><img onmouseout="this.src='http://files.testfoot.webnode.fr/200000128-0ac080bbeb/U17_off.jpg'" onmouseover="this.src='http://files.testfoot.webnode.fr/200000129-484794942b/U17_on.jpg'" src="http://files.testfoot.webnode.fr/200000128-0ac080bbeb/U17_off.jpg" style="border-width: 0px; border-style: solid; width: 160px; height: 40px;"></a></p>
<p style="text-align: center;"><a href="convocations/u19/"><img onmouseout="this.src='http://files.testfoot.webnode.fr/200000130-84d2a85d05/U19_off.jpg'" onmouseover="this.src='http://files.testfoot.webnode.fr/200000131-c2595c3542/U19_on.jpg'" src="http://files.testfoot.webnode.fr/200000130-84d2a85d05/U19_off.jpg" style="border-width: 0px; border-style: solid; width: 160px; height: 40px;"></a></p>

Modifié par 6l20 (18 Feb 2014 - 15:33)

salut,
et déjà wow !
Je ne suis pas sûr d'avoir tout saisi mais la première chose qui saute aux yeux quand on voit ton code, c'est qu'il est très mauvais et complètement illisible.
D'abord il faudra isoler les styles et les scripts dans des fichiers à part pour d'une part une maintenance plus facile et d'autre part, pouvoir mieux bénéficier du cache des navigateurs.
Avec ton code, il y a un nombre impressionnants de requêtes qui sont faite. Pour ce genre de choses, on utilise des sprites CSS (--> google) mais surtout, pas la peine de passer par JS pour l'effet le plus simple en CSS qu'est ":hover".
Après, je ne vois pas trop comment tu comptes utiliser mouseover/mouseout (ou plus simplement ":hover") sur des terminaux mobiles.

Pour revenir à ta question, qu'entends-tu par mettre du texte sur les images ?

Bonsoir
Et merci pour la réactivité.
Comme j'ai essayé de l'expliquer j'ai dans un premier temps utiliser du css pour arriver à mes fin
(sans problème) hormis l'affichage sur mobile.
Je vois bien que le code que j'ai présenté ici n'est pas bon mais c'est tout ce que j'ai trouvé pour afficher correctement (visuellement parlant) mes images sur la version mobile du futur site.

Pour revenir à ta question, qu'entends-tu par mettre du texte sur les images ?

J'entends par là avoir une image ou bouton sur lequel vient se superposer du texte.

Pour essayer d'être le plus clair possible, deux adresses de mes sites de test :

- le premier avec mon code sale mais qui fonctionne sur la version mobile
http://testfoot.webnode.fr/[/url
- le seconde avec du code faisant appel à css (plus propre) mais qui ne donne rien sur version mobile
http://testfoot2.webnode.fr/[/url

En espérant que cela explique mieux mon propos.

Merci

Cordialement

Dans ce cas il ne s'agit pas d'image au sens sémantique du terme mais seulement d'arrière plan qui se gère en CSS (vie "background" donc). L'utilisation de la balise <img> n'est pas appropriée.
De plus, il est possible d'avoir cet effet en CSS3 avec "linear-gradient" (voici un lien parmi tant d'autres pour te faciliter la tâche).
Comme je l'ai dit dans mon précédent message, mieux vaut passer par un sprite CSS.
Encore une fois, je ne vois pas comment tu compteras utiliser l'effet "mouseover/mouseout" sur des terminaux mobiles vu qu'il n'y a pas de "mouse".
Pour les styles non appliqués, je pense qu'il s'agit d'une règle de priorité qui entre en jeu et qui fait que le poids des sélecteurs que tu utilises ne sont pas assez conséquents pour écraser les styles déjà présents.

Merci de m'avoir répondu si vite.
Je vais essayer de vous répondre au mieux pour faire avancer le machin.

a écrit :
Dans ce cas il ne s'agit pas d'image au sens sémantique du terme mais seulement d'arrière plan qui se gère en CSS (vie "background" donc). L'utilisation de la balise <img> n'est pas appropriée.

J'avoue que la je ne maîtrise pas tout mais j'essaie de comprendre.
OK il ne s'agit pas d'images mais de background.

a écrit :
De plus, il est possible d'avoir cet effet en CSS3 avec "linear-gradient" (voici un lien parmi tant d'autres pour te faciliter la tâche).

Oui j'y ai pensé mais comment dans ce cas rajouter mon ballon dans le coin inférieur droit ?
Dans mon site Test2 j'utilise le css suivant

.bouton_off a {
	display:block;
	width : 160px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	background: url("../img/bouton_off.png") no-repeat;
    text-decoration: none;
	font-size: 18px;
	font-family: Calibri;
    font-weight: bold;
	color: #FFFFFF;
	margin-top : 12px;
}
.bouton_off a:hover {
	background: url("../img/bouton_on.png");
	color: #313131;
}
.bouton_on a {
	display:block;
	width : 160px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	background: url("../img/bouton_on.png") no-repeat;
    text-decoration: none;
	font-size: 18px;
	font-family: Calibri;
    font-weight: bold;
	color: #FB0D1D;
	margin-top : 12px;
}

avec le code html suivant

<div class="bouton_off">
	<p><a href="#">Bouton</a></p>
</div>
<div class="bouton_off">
	<p><a href="#">Bouton</a></p>
</div>
<div class="bouton_off">
	<p><a href="#">Bouton</a></p>
</div>
<div class="bouton_on">
	<p><a>u15</a></p>
</div>

Pour moi c'est déjà pas mal maintenant les sprite CSS, j'en suis loin.

a écrit :
Encore une fois, je ne vois pas comment tu compteras utiliser l'effet "mouseover/mouseout" sur des terminaux mobiles vu qu'il n'y a pas de "mouse".

Ce n'est pas pour l'effet mais plus pour afficher l'arrière plan sur la version mobile.

a écrit :
Pour les styles non appliqués, je pense qu'il s'agit d'une règle de priorité qui entre en jeu et qui fait que le poids des sélecteurs que tu utilises ne sont pas assez conséquents pour écraser les styles déjà présents.

Est-il alors possible de les rendre plus lourds ?

Encore merci pour toutes ces infos

Cordialement

alt56 a écrit :
Oui j'y ai pensé mais comment dans ce cas rajouter mon ballon dans le coin inférieur droit ?

Ce n'était qu'une suggestion, tu peux très bien garder cette image en fond, ça t'offrira en plus un plus grande compatibilité. Par ailleurs, tu aurais pu utiliser un "background-position".

alt56 a écrit :
Pour moi c'est déjà pas mal maintenant les sprite CSS, j'en suis loin.

Crois-moi, il n'y a absolument rien d'extraordinaire là-dedans, ça te prendra 10 min pour comprendre le truc et tu gagneras pas mal.

alt56 a écrit :
Est-il alors possible de les rendre plus lourds ?

Oui ! Avec la propriété

weight: 450kg

Plus sérieusement, en utilisant déjà les mêmes sélecteurs que ceux choisis pour les autres résolutions. Si tu as appliquer un style avec

#ID .class>Element1 Element2 {}

alors il faut reprendre le même pour les résolutions que tu cibleras.
Il existe par ailleurs une solutions radicale qu'est celle d'ajouter "!important" à la fin de chaque propriété mais je te conseillerais vivement de passer par là.
Dans l'ordre, au sein d'un fichier de styles, un sélecteur d'ID a plus de poids qu'un sélecteur de classe, pseudo-classe, attribut qui lui même a plus de poids qu'un sélecteur d'élément, pseudo-élément qui lui-même a plus de poids que le reste des sélecteurs.
Par contre un style présent dans l'attribut "style" écrasera tous les autres.

Bonjour,

Désolé de n'avoir répondu hier soir,
Encore quelques interrogations (maintenant si mes questions à répétition deviennent trop ennuyeuses je comprendrais que tu ne veuille plus me répondre)

a écrit :
tu peux très bien garder cette image en fond, ça t'offrira en plus un plus grande compatibilité

Quand tu parles de compatibilité c'est avec les navigateurs je suppose ?

a écrit :
Par ailleurs, tu aurais pu utiliser un "background-position".

Je vais regardé ce qu'apporte cette propriété de plus près

a écrit :
Crois-moi, il n'y a absolument rien d'extraordinaire là-dedans, ça te prendra 10 min pour comprendre le truc et tu gagneras pas mal.

Oui mais avec cela je ne pourrais plus (si j'ai bien compris) utiliser mon image de fond avec le ballon ?

a écrit :
Plus sérieusement, en utilisant déjà les mêmes sélecteurs que ceux choisis pour les autres résolutions. Si tu as appliquer un style avec
#ID .class>Element1 Element2 {}
alors il faut reprendre le même pour les résolutions que tu cibleras.

En clair il faut que je revois mon code css et html que je t'ai montré dans le post pour qu'il soit plus adapté. Du genre
.bouton_off a {
deviendrait
#bouton_off .class>Element1 Element2 {}
maintenant qu'est-ce que je mets pour .class>Element1 Element2 {} ????

a écrit :
Il existe par ailleurs une solutions radicale qu'est celle d'ajouter "!important" à la fin de chaque propriété mais je te conseillerais vivement de passer par là.

Tu me conseilles ou tu me déconseilles vivement de passer par là ??? J'ai un doute

Encore un grand merci

Cordialement

Oui ^^ certaines de mes réponses étaient un peu floues, faut dire qu'il était tard.

alt56 a écrit :
Quand tu parles de compatibilité c'est avec les navigateurs je suppose ?

Oui et plus précisément les anciens (ie7, ie8...).

alt56 a écrit :
Oui mais avec cela je ne pourrais plus (si j'ai bien compris) utiliser mon image de fond avec le ballon ?

Non, ça c'est au cas où tu passerais par un "linear-gradient" (et encore tu pourras toujours l'utiliser).
Ce dont je parle est une technique utilisée en CSS pour minimiser le nombre de requêtes en ne chargeant qu'un minimum d'images qui contiendraient un ensemble d'autres images. Tu aurais dû voir ça sur Google.

alt56 a écrit :
En clair il faut que je revois mon code css et html que je t'ai montré dans le post pour qu'il soit plus adapté. Du genre
.bouton_off a {
deviendrait
#bouton_off .class>Element1 Element2 {}
maintenant qu'est-ce que je mets pour .class>Element1 Element2 {} ????

Oulaa non, ce n'est pas ce que je voulais dire. Je dis que si tu utilises un sélecteur pour un style général alors il faudra que tu utilises le même lorsque tu appliqueras des styles précis pour les résolutions différentes :

<div id="monDiv"></div>

div {width:200px;height:200px;margin:auto;}
#monDiv {background:red;}
@media screen and (max-width:700px) {
	div {background:green;}
}			

Avec le CSS précédent, la <div> restera rouge pour les résolutions d'écran inférieures à 700px même si on a précisé qu'il faut qu'elle devienne "verte". Ça s'explique par le poids du sélecteur utilisé (comme expliqué dans mon précédent message).

Avec ce CSS

div {width:200px;height:200px;margin:auto;}
#monDiv {background:red;}
@media screen and (max-width:700px) {
	#monDiv {background:green;}
}			

La <div> deviendra bien verte pour les résolutions inférieures à 700px de large. Tu peux tester en redimensionnant la fenêtre de ton navigateur.

alt56 a écrit :
Tu me conseilles ou tu me déconseilles vivement de passer par là ??? J'ai un doute

Je te déconseille bien sûr.

a écrit :
Oulaa non, ce n'est pas ce que je voulais dire. Je dis que si tu utilises un sélecteur pour un style général alors il faudra que tu utilises le même lorsque tu appliqueras des styles précis pour les résolutions différentes :


<div id="monDiv"></div>



div {width:200px;height:200px;margin:auto;}
#monDiv {background:red;}
@media screen and (max-width:700px) {
div {background:green;}
}


Avec le CSS précédent, la <div> restera rouge pour les résolutions d'écran inférieures à 700px même si on a précisé qu'il faut qu'elle devienne "verte". Ça s'explique par le poids du sélecteur utilisé (comme expliqué dans mon précédent message).

Avec ce CSS


div {width:200px;height:200px;margin:auto;}
#monDiv {background:red;}
@media screen and (max-width:700px) {
#monDiv {background:green;}
}


La <div> deviendra bien verte pour les résolutions inférieures à 700px de large. Tu peux tester en redimensionnant la fenêtre de ton navigateur.

Avant d'aller plus loin je vais revoir mon script css et essayer de mettre en application toutes ces informations.

Je me permettrais de revenir vers toi si je n'y arrive pas avec mon bout de script (si cela ne te dérange pas)

Un grand merci
Cordialement

Bonsoir,

Pour reprendre le sujet où je l'ai laissé :
J'en suis là

CSS

#rubrique  a{
	display: block;
	width : 200px;
	line-height: 35px;
	text-align: left;
	text-indent: 15px;
	vertical-align: middle;
	margin-top : 12px;
	margin-left: auto;
	margin-right: auto;
        background: black url('../img/rubrique.png');
	text-decoration: none;
	font-size: 14px;
	font-family: arial;
font-weight: bold;
	color: #FFFFFF;
}
#bouton a{
	display: block;
	width : 160px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	background: blue url(../img/bouton_off.png) no-repeat;
    text-decoration: none;
	font-size: 18px;
	font-family: Calibri;
    font-weight: bold;
	color: #FFFFFF;
	margin-top : 12px;
}
#bouton a:hover,#bouton a:active,#bouton a:focus {
	background: grey url(../img/bouton_on.png);
	color: #313131;
}
#onbouton a{
	display: block;
	width : 160px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	background: grey url(../img/bouton_on.png) no-repeat;
    text-decoration: none;
	font-size: 18px;
	font-family: Calibri;
    font-weight: bold;
	color: #FB0D1D;
	margin-top : 12px;
}

Oups
J'ai oublié le code html

<div id="rubrique">
	<p><a>Convocations</a></p>
</div>
<p>&nbsp;</p>
<div id="bouton">
	<p><a href="equipes/ecoledefoot/">Ecole de foot</a></p>
</div>
<div id="onbouton">
	<p><a>U15</a></p>
</div>
<div id="bouton">
	<p><a href="equipes/u17/">U17</a></p>
</div>
<div id="bouton">
	<p><a href="equipes/u19/">U19</a></p>
</div>
<p>&nbsp;</p>

C'est pour le moment ce que j'ai réussi à faire de mieux

salut,
le code HTML reste boiteux malgré tout. Je ne comprends pas trop pourquoi mettre les <a> dans des <p> qui eux même sont mis dans des <div> ? On pourrait simplement mettre les <a> et pourquoi les mettre dans une liste si c'est une sorte de menu et encore mieux les englober dans un <nav> ?
Je ne vois pas non plus pourquoi utiliser des "<p>&nbsp;</p>".
Par contre il y a une erreur, on ne peut pas utiliser le nom d'un ID plusieurs fois. Dans ce cas là, il s'agit d'une classe.
Je redonne quand même le HTML tel quel avec un CSS plus compact

<div id="rubrique" class="bouton">
	<p><a>Convocations</a></p>
</div>
<p>&nbsp;</p>
<div class="bouton">
	<p><a href="equipes/ecoledefoot/">Ecole de foot</a></p>
</div>
<div id="onbouton" class="bouton">
	<p><a>U15</a></p>
</div>
<div class="bouton">
	<p><a href="equipes/u17/">U17</a></p>
</div>
<div class="bouton">
	<p><a href="equipes/u19/">U19</a></p>
</div>
<p>&nbsp;</p>

.bouton a{
	display: block;
	width : 160px;
	margin:12px auto 0;
	text-align: center;
    text-decoration: none;
	font:700 18px/40px Calibri;
	background: blue url(../img/bouton_off.png) no-repeat;
	color: #fff;
}

#rubrique  a{
	display: block;
	width : 200px;
	text-align:left;
	text-indent: 15px;
	font:700 14px/35px arial, sans-serif;
    background: #000 url('../img/rubrique.png') no-repeat;
}

#onbouton a, #bouton a:hover,#bouton a:active,#bouton a:focus {
	background: grey url(../img/bouton_on.png) no-repeat;
	color: #313131;
}

#onbouton a{
	color: #FB0D1D;
}

C'est juste une suggestion.

a écrit :
le code HTML reste boiteux malgré tout. Je ne comprends pas trop pourquoi mettre les <a> dans des <p> qui eux même sont mis dans des <div> ? On pourrait simplement mettre les <a> et pourquoi les mettre dans une liste si c'est une sorte de menu et encore mieux les englober dans un <nav> ?
Je ne vois pas non plus pourquoi utiliser des "<p>&nbsp;</p>".
Par contre il y a une erreur, on ne peut pas utiliser le nom d'un ID plusieurs fois. Dans ce cas là, il s'agit d'une classe.
Je redonne quand même le HTML tel quel avec un CSS plus compact

Euh!!! moi non plus
La seule explication c'est que je ne maîtrise pas ce langage et que j'apprends un peu plus tous les jours.

J'ai dû mal encore avec les imbrication div class a et p

Merci pour le code je vais regardé cela de plus près.

Maintenant mon problème c'est peu être que je devrais utiliser la balise <IMG> puisque mon problème c'est d'afficher correctement les images de fonds sur la version mobile du site (comme expliqué ici : http://www.alsacreations.com/astuce/lire/62-balise-ltimggt-ou-feuille-de-style-css.html[/url.

Encore merci pour vos conseils

Cordialement