Problèmes mise en page/agrandissement d'image
kortexdev
-
kortexdev -
kortexdev -
Bonjour,
j'ai un tableau qui présente des images, lesquelles sont agrandies au passage de la souris (onmouseover="augmentation du width de l'image à 200%".
mon problème est que lors de l'agrandissement, ma mise en page est foutue en l'air... la colone dans laquelle se trouve l'image en question est élargie alors que les autres sont rétrécies.
comment faire pour éviter ce genre de problème.
merci d'avance
j'ai un tableau qui présente des images, lesquelles sont agrandies au passage de la souris (onmouseover="augmentation du width de l'image à 200%".
mon problème est que lors de l'agrandissement, ma mise en page est foutue en l'air... la colone dans laquelle se trouve l'image en question est élargie alors que les autres sont rétrécies.
comment faire pour éviter ce genre de problème.
merci d'avance
A voir également:
- Problèmes mise en page/agrandissement d'image
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Agrandir une image - Guide
3 réponses
si tu as un tableau avec une image élargie, c'est normal que la colonne soit élargie ... non ?
en gros ton problème c'est que le tableau à une longueur fixe ?
en gros ton problème c'est que le tableau à une longueur fixe ?
rebonjour,
oui mon tableau est fixe. En fait avant j'aurai utilisé un calque pour faire ça mais dreamweaver ne propose plus cette option et je me rappelle plus du code. il suffisait de rendre visible le calque avec l'image agrandie.
mon but est de faire en sorte que lorsque la souris passe sur l'image on voit apparaître l'image agrandie. (quelque soit l'endroit cela importe peu)
tout ça sans bouffer ma mise en page.
merci qui pour ce beau casse tête... ;-)
et merci à vous pour vos réponses
oui mon tableau est fixe. En fait avant j'aurai utilisé un calque pour faire ça mais dreamweaver ne propose plus cette option et je me rappelle plus du code. il suffisait de rendre visible le calque avec l'image agrandie.
mon but est de faire en sorte que lorsque la souris passe sur l'image on voit apparaître l'image agrandie. (quelque soit l'endroit cela importe peu)
tout ça sans bouffer ma mise en page.
merci qui pour ce beau casse tête... ;-)
et merci à vous pour vos réponses
salut,
j'ai trouvé ce code, il fonctionne très bien sur IE6 mais ne fonctionne pas sur mozilla: le <DIV> s'affiche toujours en haut à droite
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";
var finalPosX=posX-xOffset;
if (finalPosX<0) finalPosX=0;
if (document.layers) {
document.layers["bulle"].document.write(contenu);
document.layers["bulle"].document.close();
document.layers["bulle"].top=posY+yOffset;
document.layers["bulle"].left=finalPosX;
document.layers["bulle"].visibility="show";}
if (document.all) {
//var f=window.event;
//doc=document.body.scrollTop;
bulle.innerHTML=contenu;
document.all["bulle"].style.top=posY+yOffset;
document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
document.all["bulle"].style.visibility="visible";
}
//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
else if (document.getElementById) {
document.getElementById("bulle").innerHTML=contenu;
document.getElementById("bulle").style.top=posY+yOffset;
document.getElementById("bulle").style.left=finalPosX;
document.getElementById("bulle").style.visibility="visible";
}
}
function getMousePos(e) {
if (document.all) {
posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement
posY=event.y+document.body.scrollTop;
}
else {
posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
posY=e.pageY;
}
}
function HideBulle() {
if (document.layers) {document.layers["bulle"].visibility="hide";}
if (document.all) {document.all["bulle"].style.visibility="hidden";}
else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
}
if (document.all) {
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
document.onmousemove=getMousePos;
}
//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
else if (document.getElementById) {
document.onmousemove=getMousePos;
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
}
}
</SCRIPT>
<!-- appel à l'initialisation des infos bulles (laisser dans le BODY) -->
<SCRIPT language="JavaScript">InitBulle("navy","#BEC0A0","#BEC0A0",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)
</SCRIPT>
je l'appelle comme suit dans du script php:
$bulle = "onMouseOver=\"AffBulle('<IMG src=\'images/imgs/".$rangeeimage['url_image']."\' width=200></CENTER>')\" onMouseOut=\"HideBulle()\">";
$afficheliste .= '<a href="?value='.$rangeeprod['id_produit'].'&navigation=produitfin" '.$bulle.'><img src="./images/imgs/'.$rangeeimage['url_image'].'" width="100" name="image'.$rangeeprod['id_produit'].'" id="image'.$rangeeprod['id_produit'].'"> </a></th>';
merci d'avance pour votre aide...
j'ai trouvé ce code, il fonctionne très bien sur IE6 mais ne fonctionne pas sur mozilla: le <DIV> s'affiche toujours en haut à droite
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";
var finalPosX=posX-xOffset;
if (finalPosX<0) finalPosX=0;
if (document.layers) {
document.layers["bulle"].document.write(contenu);
document.layers["bulle"].document.close();
document.layers["bulle"].top=posY+yOffset;
document.layers["bulle"].left=finalPosX;
document.layers["bulle"].visibility="show";}
if (document.all) {
//var f=window.event;
//doc=document.body.scrollTop;
bulle.innerHTML=contenu;
document.all["bulle"].style.top=posY+yOffset;
document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
document.all["bulle"].style.visibility="visible";
}
//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
else if (document.getElementById) {
document.getElementById("bulle").innerHTML=contenu;
document.getElementById("bulle").style.top=posY+yOffset;
document.getElementById("bulle").style.left=finalPosX;
document.getElementById("bulle").style.visibility="visible";
}
}
function getMousePos(e) {
if (document.all) {
posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement
posY=event.y+document.body.scrollTop;
}
else {
posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
posY=e.pageY;
}
}
function HideBulle() {
if (document.layers) {document.layers["bulle"].visibility="hide";}
if (document.all) {document.all["bulle"].style.visibility="hidden";}
else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
}
if (document.all) {
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
document.onmousemove=getMousePos;
}
//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
else if (document.getElementById) {
document.onmousemove=getMousePos;
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
}
}
</SCRIPT>
<!-- appel à l'initialisation des infos bulles (laisser dans le BODY) -->
<SCRIPT language="JavaScript">InitBulle("navy","#BEC0A0","#BEC0A0",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)
</SCRIPT>
je l'appelle comme suit dans du script php:
$bulle = "onMouseOver=\"AffBulle('<IMG src=\'images/imgs/".$rangeeimage['url_image']."\' width=200></CENTER>')\" onMouseOut=\"HideBulle()\">";
$afficheliste .= '<a href="?value='.$rangeeprod['id_produit'].'&navigation=produitfin" '.$bulle.'><img src="./images/imgs/'.$rangeeimage['url_image'].'" width="100" name="image'.$rangeeprod['id_produit'].'" id="image'.$rangeeprod['id_produit'].'"> </a></th>';
merci d'avance pour votre aide...
