Forum d'entraide PHPFrance

Bonjour
je ne sais pas si c'est possible :

J'ai un bloc <div> je veux y mettre une image de grande taille, plus grande que la taille du bloc.
Grace à 4 boutons, pouvoir la déplacer dans ce bloc.

Sur les liens donnés dans le post-it au-dessus, j'ai trouvé ça :

<!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" >
   <head>
		
		<link rel="stylesheet" media="screen" type="text/css" title="Défaut" href="style_membre.css" />
<SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
    {
    if(document.getElementById)
        {
        hautimage += y;
        gaucheimage += x;
        document.getElementById("carte").style.top = hautimage;
        document.getElementById("carte").style.left = gaucheimage;
        }
    }
</SCRIPT>
   </head> 
<body>

<div id="corps">

<FORM>
<INPUT TYPE=button VALUE=gauche onClick="bouge(-10,0)">
<INPUT TYPE=button VALUE=droite onClick="bouge(10,0)">
<INPUT TYPE=button VALUE=haut onClick="bouge(0,-10)">
<INPUT TYPE=button VALUE=bas onClick="bouge(0,10)">
</FORM>

<div id="carte">

<SCRIPT LANGUAGE="javascript">
var hautimage =224;
var gaucheimage = 224;
document.write('<IMG SRC="deco_2/essai.jpg" ID=carte STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');

</SCRIPT>

</div>

</body>
</html>

En fait, dans cet exemple, l'image ne bouge pas et de plus elle est redimenssionée pour s'adapter à mon bloc.

la div est "carte" et voici ce qui le concerne en css

#carte {
	position: relative;
	width:224px;height: 224px;
	margin-left: auto;margin-right:auto;
	padding: 0px;
}

J'avoue n'avoir aucune connaissance en JS.
Merci pour toute aide.

Il me semble qu'il faut faire une clip Flash pour ca, mais me demande pas comment faire, j'y connais rien

moi non plus

Réglé grâce à ça : overflow: hidden;

Forum d'entraide PHPFrance

déplacer une image dans un bloc

déplacer une image dans un bloc