2 images en html 1 doit apparaître pour desktop l'autre pour smartpho

J'ai deux images avec chacune un lien différent, j'aimerai qu'une seule image avec son lien apparaisse pour la version desktop et que l'autre apparaisse pour la version mobile. J'ai mis pour le premier "id" de la version desktop un {display: none;} pour l'image du smartphone et inversement, mais si la version desktop fonctionne très bien se sont les deux images qui n'apparaissent pas sur la version smartphone... ?
Une idée de la ligne de code manquante ?

Voici la page :
Les deux images sont en bas de page :
id="pour_grand_ecran" - "boutons/03_off.png"
id="pour_petit_ecran" - "boutons/03_tetedemort_off.png"

http://www.sixdeniers.com/index_html5_rollover_02.htm

D'avance merci pour votre aide

Hello

Tu as d'autre façon de gérer ce cas, mais tel que tu es parti, ton problème vient du fait que tu ne surcharge pas le display:none; de ton id pour_petit_ecran dans ton css < 1024px.
Tu dois donc rajouter ceci dans style_1024.css :

#pour_petit_ecran {
        display: inline;
}

Bye
Modifié par tomInCat (06 Jan 2015 - 15:39)

Merci beaucoup pour votre aide ! Ça fonctionne !

Salut,
Afin de m'instruire un peu, j'ai suivi le lien donné pour regarder le code, mais la page n'existe plus et c'est bien dommage.
Pourrais-tu, s'il te plait, mettre sur le forum le bout de code fonctionnant pour comprendre ?
Merci

j'ai remis le lien http://www.sixdeniers.com/index_html5_rollover_02.htm
sinon c'est http://sixdeniers.com/

sur le fichier html tout en bas de la page

<span id="pour_grand_ecran"><a href="http://www.cghkx.com" target="_blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','boutons/03_on.png',1)"><img src="boutons/03_off.png" alt="cghkx" width="313" height="313" id="Image26"></a></span>

<span id="pour_petit_ecran"><a href="http://www.defcon01.com" target="_blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','boutons/03_tetedemort_on.png',1)"><img src="boutons/03_tetedemort_off.png" alt="defcon" width="313" height="313" id="Image27"></a></span>




sur le css desktop

#pour_petit_ecran
{
display: none;
}




sur le css smartphone

#pour_grand_ecran
{
display: none;
}


#pour_petit_ecran
{
display: inline;
}