11540 sujets

JavaScript, DOM et API Web HTML5

Apparition image au survol d'un lien

Bonjour à tous !
Je sais que ce sujet a été traité plusieurs fois mais je n'ai jamais réussi à trouver le code parfait...
Mon site internet :
http://www.QG-creation.com

Mon but est, qu'au survol de Gunfight, White as a Ghost ou Photographies, une image apparaisse en background... et qu'elle disparaisse quand le lien n'est plus survolé (comme ceci : http://www.qg-creation.com/HOME-IMAGE.png ). Et si en plus, je pouvais la faire apparaître en fondu (comme le surlignage), ça serait top !
En plus de ça, il faudrait que cette image se redimensionne intelligemment suivant la définition des écran. Bon, pour ça, j'ai trouvé un tutoriel (http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html). Mais reste à l'intégrer au milieu de tout ça.
Je suppose qu'il faut utiliser du javascript mais je connais très mal ce langage (pour ne pas dire pas du tout), c'est pour cela que je m'approche de vous.

Merci d'avance ! Smiley smile

PS : Le dégradé noir en début d'image sera ajouté directement sur l'image, je demande pas à ce qu'on trouve le moyen de le faire en css Smiley cligne
Modifié par QG-creation (28 Apr 2013 - 19:48)
Bonjour,

essaie un peu ceci: j'ai fias ça à l'aveuglette donc je n'ai pas tester le code mais ça devrais fonctionné, sinon fais signe Smiley smile .


Code Js :
var bgImage = new Array(); // création d'un tableau

bgImage[0] = "images/image1.jpg"; // Tu met tes images dans le tableau en suivant le meme schéma
bgImage[1] = "images/image2.jpg";
bgImage[2] = "images/image3.jpg";
bgImage[3] = "images/image4.jpg";

function changeBGImage(whichImage)
{
document.getElementById(“maDiv”).style.backgroundImage= bgImage[whichImage];// maDiv = div qui contien le bg
}

function changeStyleBack()
{
document.getElementById(“maDiv”).style.backgroundImage= bgImage[whichImage];
}
  // maDiv = div qui contien le bg
 // Tu dois avoir stocké une image de fond dans ton tableau
// Si tu n'a pas d'image mais une couleur remplace backgroundImage par : backgroundColor = #color


HTML : Dans chaque <li> ou <a> de ta navigation ou l'image doit apparaitre/disparaitre.

onmouseover=”changeBGImage(X)”; onmouseout=”changeStyleBack(x)”  

<!-- over = quand la souris passe sur l'élément / out = quand la souris quitte l'élément -->
<!-- X = le numéro de l'image dans le tableau ça commence à 0 jusque ton nombre d'image -->


Ps : J'ai crée deux fonctions mais avec une ça aurait été bon, sauf que là si tu change la fonction et lui attribut directement un numéro d'image dans la partie js, tu ne devra pas spécifier dans le out le numéro de la partie html
Modifié par Nyco (02 May 2013 - 20:39)
Sujet clos
Aller à