Changer une image en survolant 1 autre image

Résolu
tiralia Messages postés 1577 Date d'inscription   Statut Membre Dernière intervention   -  
tiralia Messages postés 1577 Date d'inscription   Statut Membre Dernière intervention   -
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 1577 Date d'inscription   Statut Membre Dernière intervention   256
 
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 1577 Date d'inscription   Statut Membre Dernière intervention   256
 
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 1577 Date d'inscription   Statut Membre Dernière intervention   256
 
merci tout de même. ^^
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses