Pour tes images, comme tu sais, c'est une histoire de chemin, si elles n'apparaissent pas c'est parceque tu n'as pas bien enregistrer ton fichier html dans le bon dossier et vis et versailles...Les images et les fichiers correspondent dans le même dossier. Si ils ne sont pas au même endroit, personne ne se trouve. Je ne dit pas ça pour toi, mais pour d'autres éventuels utilisateurs qui ne sauraient pas...Il faut un jour commencer et je sais ce que c'est...
ensuite li bien le code et aux indications écrit le nom de tes images....(Pour ma part elles sont dans un dossier image à la racine de mon site...
Il y a dans ce code un menu tout simple une image d'entête et un rollover sur la sourris avec images...J'ai retravaillé pour obtenir des tableaux, mais tu peux les rendre transparent en changant dans la zone correspondante=> border= "0" A toi de placer les tiennes...Bon courrage et écrit si ça ne va pas pour toi, on peut changer le style ou penser à un autre code total différent...A+
Pour commencer, voila, efface tout dans un code source d'une page vierge et copie-colle ce code :.=>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>
body
{
font-size:10pt;
font-family:Arial;
}
div img
{
padding:0px;
margin:0px;
display:inline;
border-width:0px;
}
.tst
{
position : absolute;
top : 200px;
}
.td_over
{
background-color: #ADD8E6;
color : #000000; }
.td_out
{
background-color: #00003D; color : #FFFFFF;
}
.popup
{
position : absolute; top: -1425px; left: 564px;
border-style : solid;
border-width : 1px;
border-color : #000000;
left : -10000px; top: -425px;
}
</style><script type="text/javascript">
<!--
var last_popup = null;
function getAbsY(obj)
{
var absY = 0; var node = obj;
while (node)
{
absY += node.offsetTop;
node = node.offsetParent;
}
return absY ;
}
function getAbsX(obj)
{
var absX = 0; var node = obj;
while (node)
{
absX += node.offsetLeft;
node = node.offsetParent;
}
return absX ;
}
function close_popup(obj)
{
obj.style.left = "-10000px";
}
function mouseOut(obj)
{
obj.className="td_out";
}
// Calcul de la hauteur interne de la fenêtre (hors menu, barre d'état etc ...)
function getInnerHeight()
{
var height=0;
if (self.innerHeight) // all except Explorer
{
height = self.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
height = document.documentElement.clientHeight;
}
else {
if (document.body) // other Explorers
{
height = document.body.clientHeight;
}
}
}
return height;
}
// Calcul de la largeur interne de la fenêtre (hors menu, barre d'état etc ...)
function getInnerWidth()
{
var width=0;
if (self.innerWidth) // all except Explorer
{
width = self.innerWidth;
}
else {
if (document.documentElement && document.documentElement.clientWidth)
// Explorer 6 Strict Mode
{
width = document.documentElement.clientWidth;
}
else {
if (document.body) // other Explorers
{
width = document.body.clientWidth;
}
}
}
return width;
}
// Calcul de l'offset horizontal = de combien on a déplacé le curseur de l'ascenseur horizontal
function getOffsetX()
{
var offsetX =0;
if (self.pageXOffset) // all except Explorer
{
offsetX = self.pageXOffset;
}
else {
if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
{
offsetX = document.documentElement.scrollLeft;
}
else {
if (document.body) // all other Explorers
{
offsetX = document.body.scrollLeft;
}
}
}
return offsetX;
}
// Calcul de l'offset vertical = de combien on a déplacé le curseur de l'ascenseur vertical
function getOffsetY()
{
var offsetY =0;
if (self.pageYOffset) // all except Explorer
{
offsetY = self.pageYOffset;
}
else {
if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
offsetY = document.documentElement.scrollTop;
}
else {
if (document.body) // all other Explorers
{
offsetY = document.body.scrollTop;
}
}
}
return offsetY;
}
function mouseOver(obj)
{
if (last_popup) last_popup.style.left = "-10000px";
obj.className="td_over";
var index = obj.id.indexOf("_");
var elt = document.getElementById("popup"+obj.id.substr(index,3));
// Code pour positionnner le popup à droite de l'objet obj
// elt.style.left = (getAbsX(obj)+obj.offsetWidth+10)+"px";
// elt.style.top = (getAbsY(obj))+"px";
// Code pour centrer le popup dans la page
elt.style.left = ((getInnerWidth()-elt.offsetWidth)/2 + getOffsetX())+"px";
elt.style.top = (((getInnerHeight()-elt.offsetHeight)/2) + getOffsetY())+"px";
last_popup = elt;
}
//-->
</script><title>fenetre Popups</title>
<script language="JavaScript">
<!--
function launchWindow(url, features) {
window.open(url, "_blank", features);
}
//-->
</script></head><body><div
style="text-align: left;">
<img style="width: 800px; height: 213px;"
alt=""
src="images_de-ton_entete_en_haut_de_la_page_de_ton_site.jpg"><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div
style="position: absolute; top: 232px; left: 198px;"><table
style="text-align: left; left: 197px; width: 788px;" border="1"
cellpadding="2" cellspacing="2"><tbody><tr><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 1</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 2</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 3</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 4</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 5</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Contact 6</td></tr></tbody></table></div><br><br><br><br></div><br><div
style="top: 376px; left: 188px;" class="tst">
<table style="left: 8px; width: 256px;"><tbody><tr><td
id="td_1" class="td_out" onmouseover="mouseOver(this);"
onmouseout="mouseOut(this);"><img
style="top: 281px; left: 13px; width: 44px; height: 33px;"
alt="" src="images_de_ton_choix2.jpg">Mon commentaire</td>
</tr><tr><td id="td_2" class="td_out"
onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"><img
style="top: 323px; left: 13px; width: 44px; height: 33px;"
alt="" src="dossier-images2.jpg">Nokia</td>
</tr><tr><td id="td_3" class="td_out"
onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"><img
style="top: 365px; left: 13px; width: 44px; height: 33px;"
alt="" src="dossier-images2/autre-image.jpg">nom de
image</td>
</tr></tbody></table></div><div
style="position: absolute; top: 155px; left: 2px;"><div
id="popup_1" class="popup" onclick="close_popup(this)"><table
style="text-align: center;" border="1"><tbody><tr><td><img
src="dossier-images/ton-image.jpg"><br><center><a
href="ton-lien.html">Cliquez
ici<br>pour plus de
détail_PHOTO_1</a></center>
</td><td style="width: 14px;"><img
src="dossier-images/ton-image.jpg"></td></tr></tbody></table></div></div><div
style="position: absolute; top: 155px; left: 2px;"><div
id="popup_2" class="popup" onclick="close_popup(this)"><table
style="text-align: center;" border="1"><tbody><tr><td><img
src="dossier-images/ton-image.jpg"><br><center><a
href="ton_lien.html">Cliquez
ici<br>pour plus de
détail_PHOTO__2</a></center>
</td><td style="width: 14px;"><img
src="images_autre/bouton_fermer.jpg"></td></tr></tbody></table></div></div><div
style="position: absolute; top: 155px; left: 2px;"><div
id="popup_3" class="popup" onclick="close_popup(this)"><table
style="text-align: center;" border="1"><tbody><tr><td><img
src="dossier-images/ton-image.jpg"><br><center><a
href="Siemens.html">Cliquez
ici<br>pour plus de
détail_PHOTO___3</a></center>
</td><td style="width: 14px;"><img
src="dossier-images/ton-image.jpg"></td></tr></tbody></table></div></div></body></html>
