Bonjour et bienvenue,
xml peut servir à décrire des données mais ne permet pas ce genre de chose. Par ailleurs, on s'en sert rarement en l'état ; généralement, on transforme le xml en xhtml via une feuille xslt et un moteur de transformation (le plus souvent côté serveur... avec php par exemple)
Autrement dit, c'est optionnel et, pour ta demande, mieux vaut directement structurer tes données en xhtml. Pour obtenir le changement d'image au survol, il faut passer par Javascript.
Je te laisse un petit exemple à adapter selon tes besoins :
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
<style type="text/css"><!--
@media screen, projection
{
ul { float: left; }
div { float: left; width: 200px; height: 200px; margin-left: 50px; background-color: #CCC; }
}
--></style>
<script type="text/javascript"><!--
var oO =
{
connect: function(oElem, sEvType, fn, bCapture)
{
return document.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
false;
},
oId: function(sId)
{
return document.getElementById(sId);
},
aTag: function(oEl, sTag)
{
return oEl.getElementsByTagName(sTag);
},
oEl: function(oCible, sTag)
{
var oEl;
oEl = document.createElement(sTag);
if(arguments[2])
oEl.id = arguments[2];
return oCible.appendChild(oEl);
},
getSource: function(e)
{
return e.target || e.srcElement;
},
affiche: function(sId, e)
{
var oSrc, sImg;
oSrc = oO.getSource(e);
sImg = '<img src="' + oSrc.rel + '" width="200" height="200" alt="' + oSrc.firstChild.nodeValue + '" />';
return oO.oId(sId).innerHTML = sImg;
},
init: function()
{
var oFruits, oCont, sId, aA, iA;
oFruits = oO.oId('fruits');
sId = 'contImg';
oCont = oO.oEl(document.body, 'div', sId);
aA = oO.aTag(oFruits, 'a');
iA = aA.length;
do oO.connect(aA[--iA], 'mouseover', function(e) { oO.affiche(sId, e); }, false);
while(iA > 0);
}
};
oO.connect(window, 'load', oO.init, false);
//--></script>
</head>
<body>
<ul id="fruits">
<li><a href="pomme.html" rel="pomme.png">Pomme</a></li>
<li><a href="banane.html" rel="banane.png">Banane</a></li>
<li><a href="kiwi.html" rel="kiwi.png">Kiwi</a></li>
<li><a href="fraise.html" rel="fraise.png">Fraise</a></li>
</ul>
</body>
</html>
(Nota: Dans ce script, les images doivent se trouver dans le même dossier que ce fichier xhtml)
PS : Peux-tu
éditer ton titre pour le rendre plus explicite car ton problème n'est pas propre à "Dreamweaver CS3" ? Merci d'avance.
Modifié par koala64 (06 Aug 2007 - 09:31)
