Transformation de taille déplacement et accrochage d'image et texte

4/5 (5 avis)

Vue 9 925 fois - Téléchargée 728 fois

Description

Changez les dimensions d'une image de 0 à plusieurs milliers de fois, ou le contraire : de plusieurs milliers de fois à 0.et attachez à votre image un titre ou une description et lien hypertexte sans la modifier.
Avec la possibilité de l'accrocher au curseur et de la déplacer n'importe où sur la page cette avantage est pour l'instant, pour (Internet Explorer : 4 et +).
Mais pour le reste ça marche
Il est possible également de remplacer l'image par un texte et d'avoir les deux à la fois.

afficher le model de démonstration ici :
http://abdelaziz.elalia.net

Source / Exemple :

<html>
<head>
<title>Image dimensionnée</title>
<STYLE type=text/css>
img {
cursor:move;  BORDER-RIGHT: #C0C0C0 3px dashed; BORDER-TOP: #C0C0C0 3px dashed; BORDER-LEFT: #C0C0C0 3px dashed; BORDER-BOTTOM: #C0C0C0 3px dashed  
}
.td {
cursor:help;
}
</STYLE>
</head>
<body bgcolor="#006699">
<form name="imgform" method=post>
<script language="JavaScript">
imgform.onmousedown = capt;
imgform.onmousemove = glis;
//Pour accrocher l?image au curseur supprimez ou désactiver la ligne suivante
imgform.onmouseup = lacher;
reaction = (imgform.all) ? 0 : 1;
/* 
abdelaziz rejeb Elalia Tunisie 
[http://abdelaziz.elalia.org] 
pour tout contact: [http://abdelaziz.elalia.net] 
Le 14/05/2006


*/ 
var option;
//taille de l'image
var acte=0 
function dimensionIMG1() {
GL=document.image.width =document.imgform.larg.value ; 
GH=document.image.height =document.imgform.haut.value ;
if (acte == 0) {
acte = 1;
document.image.src = "1.jpg";// grande image ou petite image
GL;
GH;
}else {
PL=document.image.width =document.imgform.minihaut.value;
PH=document.image.height =document.imgform.minilarg.value;
acte = 0;
document.image.src = "1.jpg";// petite image ou grande image
PL;
PH;
}}
//deplacement de l'image
function capt(image) {
if (reaction) {
option = imgform.layers[e.target.name];
X=image.x;
Y=image.y;
return false;
}
else {
option = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}}
function glis(image) {
if (option) {
if (reaction) {
option.moveTo((image.pageX-X), (image.pageY-Y));
}
else {
option.pixelLeft = event.clientX-X + document.body.scrollLeft;
option.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;}
}}
function lacher(image) {
option = null;
}
</script>
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border:3px double #FFFFFF; border-collapse: collapse" bordercolor="#FFFFFF" width="100%" height="200">
<tr>
<td width="100%" align="center" height="112">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom-width:0; width:99%" width="99%" height="104">
<tr>
<td width="100%" height="104">
<a style="text-decoration: none" target="_blank" href="[http://abdelaziz.elalia.net]">
<font color="#FFFFFF">Développé par : Abdelaziz Rejeb, Elalia 7016 ? Tunisie<br>
</font><font color="#000080">[http://abdelaziz.elalia.net</font><font] color="#FFFFFF"><br>Visitez lesite web..!!</font></a><br>
<font color="#C0C0C0">Elalia: Le,<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%d/%m/%Y" startspan -->17/04/2009<!--webbot bot="Timestamp" endspan i-checksum="12573" -->
</font><p> </p>
<a href="#image" onClick="dimensionIMG1()"><font color="#C0C0C0">
</font>
<center><div id="1" style="position:absolute;left:47%;top:22;" >
<img oncontextmenu="document.location.href='http://[http://abdelaziz.elalia.net http://abdelaziz.elalia.net']" src="1.jpg" title="Cliquez sur le bouton droit pour visiter le site web" width="69" height="80" border="0" name="image">
</a><br><a title="Votre description d'image
et Votre lien hypertexte" style="text-decoration: none" target="_blank" href="[http://abdelaziz.elalia.net]">
<font color="#C0C0C0">Titre, Texte et Lien:<br>[http://abdelaziz.elalia.net</div>]
</td></tr>
</table></td>
</tr><tr>
<td width="100%" align="center" height="87">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom-width:0; width:90%" width="95%" height="66">
<tr>
<td onclick="dimensionIMG1()" class="td" title="Cliquez: Taille au choix" width="13%" height="33" bgcolor="#D3DFED">
<p align="center"><font color="#0000FF">GR-Taille-PT</font></td>
<td width="12%" height="33" bgcolor="#D3DFED">
<p align="right">largeur:  </td>
<td width="11%" height="33" bgcolor="#D3DFED">
<input onfocus="this.select()" type="text" name="larg" size="8" value="300"></td>
<td width="10%" height="33" bgcolor="#D3DFED">
<p align="right">hauteur:  </td>
<td width="14%" height="33" bgcolor="#D3DFED">
<input onfocus="this.select()" type="text" name="haut" size="8" value="400"></td>
<td width="40%" height="66" rowspan="2">
<p align="center">
<input class="td" oncontextmenu="document.location.href='http://[http://abdelaziz.elalia.net http://abdelaziz.elalia.net']" 
onclick="dimensionIMG1()" title="Cliquez sur le bouton droit pour visiter le site web" type="button" value="mini-maxi" name="B1"></td>
</tr><tr>
<td onclick="dimensionIMG1()" class="td" title="Cliquez: Taille au choix" width="13%" height="33" bgcolor="#FBFCD6">
<p align="center"><font color="#0000FF">PT-Taille-GR</font></td>
<td width="12%" height="33" bgcolor="#FBFCD6">
<p align="right">largeur:</td>
<td width="11%" height="33" bgcolor="#FBFCD6">
<input onfocus="this.select()" type="text" name="minihaut" size="8" value="69"></td>
<td width="10%" height="33" bgcolor="#FBFCD6">
<p align="right">hauteur:</td>
<td width="14%" height="33" bgcolor="#FBFCD6">
<input onfocus="this.select()" type="text" name="minilarg" size="8" value="80"></td>
</tr>
</table></td></tr>
</table></center>
<!--ecrit par:abdelaziz rejeb Elalia - Tunisie
pour tout contact: [http://abdelaziz.elalia.org]
site:[http://abdelaziz.elalia.net]
Le: 2/12/2005
-->
<font color="#C0C0C0">Changez les valeurs dan les zones de texte, et cliquez 
sur l'image ou sur le bouton (mini-maxi) ou sur (GR-Taille-PT)
<br>(!) Pour un meilleur affichage et pour éviter les erreurs téléchargez le zip.</font></form>
</body></html>

Conclusion :

Pour intégrer plusieurs images, et ajouter des fonctions, n'hésitez pas de le faire!
pour toute contact et plus d'aide :
http://abdelaziz.elalia.net

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

jypees
Messages postés
34
Date d'inscription
mardi 13 avril 2004
Statut
Membre
Dernière intervention
19 août 2007

Commence deja par noté tes codes à leur juste valeur et apres je t'aiderais. Tu sembles faire preuve d'une fierté très mal placé ...
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017

À : JYPEES
J'ais sérieusement besoins des conseilles c'est vrais merci de me le rappeler et j'ajoute même toujours mais ne pas plus que toi.
jypees
Messages postés
34
Date d'inscription
mardi 13 avril 2004
Statut
Membre
Dernière intervention
19 août 2007

Je me trompe??? excuse moi d'etre servere mais expert pour ca avec cette qualité de code et qui en plus marche au quart (sur firefox j'en parle meme pas).
Principe d'un code expert:
on apprend (la c'est pas le cas)
c'est bien pensé (la c'est pas le cas)
on a affaire a un jolie code (la c'est la cata)

Bref un conseil :
http://sergep.developpez.com/tutoriels/javascript/introduction/
http://www.developpez.biz/downloads/javascript/cours_javascript.zip

Tu en as besoin (serieusement)
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017

salut: jypees
Tu vois mal les choses !!!!!
Aller bon courage.
jypees
Messages postés
34
Date d'inscription
mardi 13 avril 2004
Statut
Membre
Dernière intervention
19 août 2007

note : 2/10
Je ne vois vraiment pas ce que vient faire un tel script en niveau expert et puis je trouve que cela marche mal. Tu fais des evenements a ta page avec onmousedown et onmouseup mais tu devrais utiliser attachEvent et addEventListener, c'est plus propre et tu geres plusieurs fonctions sur un evenement. J'ai aussi remarquer que tu faisais un oncontextmenu mais le return false est indispensable sinon tu laisses le menu du navigateur appraitre. Le comportement est etrange, le drag ne marche ni sur ie ni sur firefox. De plus en javascript il est plus propre de travailler sur une image faite par js (new Image) que modifier des attributs css a l'arrache. Et dans l'ensemble le code est mal pensé. Bref je m'arrete la ^^ il y a encore du boulot ;)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.