Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Rollover image lien

lordtoniok

Par lordtoniok
dans Programmation

 Partager

Messages recommandés

lordtoniok Godlike Member

lordtoniok

Posté(e)
Posté(e)

Salut a tous!! voila pour mon site [PUB ON] Mon site [/PUB] Je voudrais mettre un rollover sur l'image qui me sert de lien ! Je sais pas comment faire. Pour info c'est du html tout ce qu'i y a de plus normal (fait en partie au bloc-note)

Lien vers le commentaire
Partager sur d’autres sites

D'Artagnan Godlike Member

D'Artagnan

Posté(e)
Posté(e)

tu met ton image sur une nouvelle page que qu'on nommera ici "page" pour l'exemple et tu fais une iframe

<iframe name="exempleIframe" width="xx%" height="xx" border="1" frameborder="1" src= "page">  </iframe>

en modifiant les valeurs height et width tu aura ce que tu veux

Lien vers le commentaire
Partager sur d’autres sites
lordtoniok Godlike Member

lordtoniok

Posté(e)
  • Auteur
Posté(e)

heu j'ai pas essay" mais je pense que c'est pas ce que je veux!!

en fait je veux un roll over sur une image ( image qui change quand on passe la souris dessus) mais je veux que ces 2 images soit des liens !!

merci d'avance et dsl si tu avais raison!!

Lien vers le commentaire
Partager sur d’autres sites
D'Artagnan Godlike Member

D'Artagnan

Posté(e)
Posté(e)

tu veux une image survolée avec un lien d'apres ce que tu expliques

<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

// dans la partie body
//

<body onLoad="MM_preloadImages('image1.jpg')">
 

<a href="ta_page" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','image2)"><img src="image1" name="Image1" width="250" height="250" border="0"></a>

 

tu remplaces "ta page" par le lien et "image 1 et 2" par tes 2 images qui doivent avoir la meme taille pour que ça soit propre

Lien vers le commentaire
Partager sur d’autres sites
lordtoniok Godlike Member

lordtoniok

Posté(e)
  • Auteur
Posté(e) (modifié)
<script language="JavaScript" type="text/JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

 

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

  if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

 

function MM_findObj(n, d) { //v4.01

var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

 

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

  if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script></head>

 

 

<body bgcolor="#000000" text="#FFFFFF" onLoad="MM_preloadImages('images2.jpg')">

<a href="images.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','image2)">

<img src="images.jpg" name="Image1" width="624" height="316" border="0"></a>

heu ca marche pas :P

j'ai ca sur ma page et ca marche pas !!

mon image1 s'appele>> images.jpg et la 2 >>> images2.jpg

Modifié par tangui
Lien vers le commentaire
Partager sur d’autres sites
tangui Godlike Member

tangui

Posté(e)
Posté(e)

J'ai lu en diagonal, mais si c pour changer d'image qd tu passes la souris, moi je fais ca:

	// Fonction de rollover
function rollover_tjs(nom,src) {	
// nom est le nom de l'image
// src est l'adresse du fichier d'image
document.images[nom].src=src;
}

// Fonctions de préload
function load() {
if (document.images) {
 this.length=load.arguments.length;
 for (var i=0;i<this.length;i++) {
 	this[i+1]=new Image();
 	this[i+1].src=load.arguments[i];
 	}
 }
}
// Cette fonction charge dans le cache toutes les images passées en paramètre
function preload() {
 var temp=new load("images/2-button_1.gif","images/2-button_1b.gif",
       "images/3-button_2.gif","images/3-button_2b.gif",
       "images/4-button_3.gif","images/4-button_3b.gif",
       "images/5-button_4.gif","images/5-button_4b.gif")
}	

preload()

Ensuite, dans ton code:

<a href="index.php3" onmouseover="rollover_tjs('img1','images/2-button_1b.gif')" onmouseout="rollover_tjs('img1','images/2-button_1.gif')">
<img id=img1 name=img1 src="images/2-button_1.gif" width="139" height="25" border="0" alt=" Acceuil "></a>

 

Voili :P

Lien vers le commentaire
Partager sur d’autres sites
Nyk_o Power Member

Nyk_o

Posté(e)
Posté(e) (modifié)
Salut a tous!! voila pour mon site [PUB ON] Mon site [/PUB] Je voudrais mettre un rollover sur l'image  qui me sert de lien ! Je sais pas comment faire. Pour info c'est du html tout ce qu'i y a de plus normal (fait en partie au bloc-note)

si ca fonctionne toujours pas, essaye avec ce code là.. c plus propre que le code à la Dreamweaver....

 

 

<Head>
<script language="javascript">
function setDisplay(obj)
{
if(obj) obj.style.display="";
}

function noDisplay(obj)
{
if(obj) obj.style.display="none";
}    	
</script>
</head>

<body>
<a href="test.asp" onmouseOver="setDisplay(document.all.image2);noDisplay(document.all.image1);" onmouseOut="noDisplay(document.all.image2);setDisplay(document.all.image1);">
<span id="image1" style="display:''"><img src=image1.gif' style="cursor:hand"></span>
<span id="image2" style="display:'none'"><img src='image2.gif' style="cursor:hand"></span>  
</a>
</body>

Modifié par Nyk_o
Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Nyk_o, ton code avec document.all je suis pas convaincu que.....

Enfin bon... passons...

 

Une piste ultrasimple et compatible DOM pour faire un petit rollover :

<IMG SRC=image1.jpg ID="une_image"
  OnMouseOver="document.getElementById('une_image').src='image2.jpg';"
  OnMouseOut="document.getElementById('une_image').src='image1.jpg';">

Après, si tu veux t'amuser à faire un preload sur tes images, je te laisse utiliser les bouts de Javascript postés juste avant... Y'a rien de plus simple qu'un "new Image()" ...

Lien vers le commentaire
Partager sur d’autres sites
  • 3 semaines après...
angiras Mega Power Member

angiras

Posté(e)
Posté(e)

100& css no javascipt

 

 

<?xml version="1.0" encoding="iso-8859-1"?>

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title> survol </title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

<style type="text/css">

a#home {

background-image: url("yes.gif");

background-repeat: no-repeat;

text-decoration: none;

width:22px;

}

a#home:hover {

background-image: url("no.gif");

background-repeat: no-repeat;

text-decoration: none;

width:22px;

}

</style>

</head>

<body>

<a href="#" id="home"> </a>

</body>

</html>

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...