Sujet Précédent Sujet Suivant

Changer une image en survolant 1 autre image

Résolu/Fermé
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 - 14 juin 2008 à 19:02
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 - 15 juin 2008 à 17:30
Bonjour, je vous expose mon problème, je cherche a faire une page web (html) avec des images affichés. Une de ces images servira de d'afficheur d'information quand on passe la souris sur d'autres images.

Donc une image que je nommerai A et une multitude d'images B, C, D etc...

toutes ces images sont affichées sur la page. quand je passe la souris sur l'image "b", j'ai envie que l'image "a" change.

L'application que je veux en faire : les images b, c, d, etc sont des tableaux, et l'image "a" sert a afficher un zoom sur une partie du tableau que je trouve intéressant.

J'ai dreamweaver et frontpage. quelqu'un peux me dire la marche a suivre avec l'un de ces logiciel pour y arriver? (je sais qu'on peux le faire avec dreamweaver mais je ne trouve pas)

Merci beaucoup.
A voir également:

3 réponses

Réponse 1 / 3
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 255
15 juin 2008 à 17:21
bon, j'ai trouvé tout seul...

ici
https://www.alsacreations.com/apprendre/

grace a un autre sujet : http://www.commentcamarche.net/forum/affich 3145891 image survolee


Mais j'aurai aimé le faire sans css. juste une page html, donc ma question reste posée.
une petite aide de votre part svp?
1
Réponse 2 / 3
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 255
15 juin 2008 à 17:29
cette fois ci j'ai trouvé exactement ce que je cherchai.

une page html

voici le code pour ceux que ça intéresse

Je n'ai pas décortiqué ni nettoyé le code, mais cela fonctionne parfaitement.
si quelqu'un veux le faire et le mettre au plus simple, ne pas hésiter a poster une réponse^^

<html>
<head>
<title>Free web site design templates from JimWORLD</title>
<meta name="description" content="Free web site design templates to jump start your new web site.">
<meta name="keywords"
content="free web site design template search graphic sets build web site">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- Fireworks 3.0 Dreamweaver 3.0 target. Created Sun Dec 02 19:08:46 GMT-0500 (Eastern Standard Time) 2001 -->

<script language="JavaScript">
<!--hide this script from non-javascript-enabled browsers

function MM_findObj(n, d) { //v3.0
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); return x;
}
/* Functions that swaps images. */
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];}
}
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;
}

/* Functions that handle preload. */
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];}}
}

// stop hiding -->
</script>

</head>
<body bgcolor="#000000" onLoad="MM_preloadImages('Images/splash_r3_c3_f3.jpg','Images/splash_r2_c2_f2.jpg','Images/splash_r3_c3_f4.jpg','Images/splash_r3_c2_f2.jpg','Images/splash_r3_c3_f2.jpg','Images/splash_r3_c3_f5.jpg','Images/splash_r4_c2_f2.jpg','Images/splash_r3_c3_f6.jpg','Images/splash_r5_c2_f2.jpg','Images/splash_r3_c3_f7.jpg','Images/splash_r6_c2_f2.jpg','Images/splash_r3_c3_f8.jpg','Images/splash_r7_c2_f2.jpg');">

<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->

<!-------------------------- BEGIN COPYING THE HTML HERE ---------------------------->
<!-- Image with table -->
<p> </p>
<!--------------------------- STOP COPYING THE HTML HERE --------------------------->

<p><a href="o URL (noHREF)" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f2.jpg',1);" ><img name="splash_r3_c3" src="Images/splash_r3_c3.jpg" border="0" width="226" height="221"></a><a href="subpage.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f3.jpg','splash_r2_c2','','Images/splash_r2_c2_f2.jpg',1);" ><img name="splash_r2_c2" src="Images/splash_r2_c2.jpg" width="223" height="58" border="0"></a><a href="subpage.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f4.jpg','splash_r3_c2','','Images/splash_r3_c2_f2.jpg',1);" ><img name="splash_r3_c2" src="Images/splash_r3_c2.jpg" width="177" height="29" border="0"></a><a href="subpage.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f5.jpg','splash_r4_c2','','Images/splash_r4_c2_f2.jpg',1);" ><img name="splash_r4_c2" src="Images/splash_r4_c2.jpg" width="177" height="30" border="0"></a><a href="subpage.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f6.jpg','splash_r5_c2','','Images/splash_r5_c2_f2.jpg',1);" ><img name="splash_r5_c2" src="Images/splash_r5_c2.jpg" border="0" width="177" height="33"></a><a href="subpage.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f7.jpg','splash_r6_c2','','Images/splash_r6_c2_f2.jpg',1);" ><img name="splash_r6_c2" src="Images/splash_r6_c2.jpg" width="177" height="34" border="0"></a><a href="subpage.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('splash_r3_c3','','Images/splash_r3_c3_f8.jpg','splash_r7_c2','','Images/splash_r7_c2_f2.jpg',1);" ><img name="splash_r7_c2" src="Images/splash_r7_c2.jpg" width="177" height="95" border="0"></a></p>

</body>

</html>
0
Réponse 3 / 3
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 255
15 juin 2008 à 17:30
merci tout de même. ^^
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses