CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 11:35:51

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs & Astuces

> TRANSFORMATION DE TAILLE DÉPLACEMENT ET ACCROCHAGE D'IMAGE ET TEXTE

TRANSFORMATION DE TAILLE DÉPLACEMENT ET ACCROCHAGE D'IMAGE ET TEXTE

Information sur la source

Note :

2,00 / 10

Catégorie :Trucs & Astuces Classé sous :transformation, taille, image, mouvement, Abdelaziz Niveau :Initié Date de création :14/05/2006 Date de mise à jour :18/04/2009 10:29:36 Vu / téléchargé :8 860 / 671

Auteur : abdelaziz_info

Ecrire un message privé

Site perso

Commentaire sur cette source (5)

Ajouter un commentaire et/ou une note

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.site.voila.fr/sources.htm

Source

<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.site.voila.fr
pour tout contact: http://intersite.site.voila.fr
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://http://abdelaziz.site.voila.fr">
<font color="#FFFFFF">Développé par : Abdelaziz Rejeb, Elalia 7016 � Tunisie<br>
</font><font color="#000080">http://abdelaziz.site.voila.fr</font><font color="#FFFFFF"><br>Visitez lesite web..!!</font></a><br>
<font color="#C0C0C0">Elalia: Le,17/04/2009
</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.site.voila.fr'" 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&#10et Votre lien hypertexte" style="text-decoration: none" target="_blank" href="http://http://abdelaziz.site.voila.fr">
<font color="#C0C0C0">Titre, Texte et Lien:<br>http://abdelaziz.site.voila.fr</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.site.voila.fr'"
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://intersite.site.voila.fr
site:http://http://abdelaziz.site.voila.fr
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>

<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&#65533;image au curseur supprimez ou désactiver la ligne suivante
imgform.onmouseup = lacher;
reaction = (imgform.all) ? 0 : 1;
/* 
abdelaziz rejeb Elalia Tunisie 
http://abdelaziz.site.voila.fr 
pour tout contact: http://intersite.site.voila.fr 
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://http://abdelaziz.site.voila.fr">
<font color="#FFFFFF">Développé par : Abdelaziz Rejeb, Elalia 7016 &#65533; Tunisie<br>
</font><font color="#000080">http://abdelaziz.site.voila.fr</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>&nbsp;</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.site.voila.fr'" 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&#10et Votre lien hypertexte" style="text-decoration: none" target="_blank" href="http://http://abdelaziz.site.voila.fr">
<font color="#C0C0C0">Titre, Texte et Lien:<br>http://abdelaziz.site.voila.fr</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:&nbsp; </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:&nbsp; </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.site.voila.fr'" 
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://intersite.site.voila.fr
site:http://http://abdelaziz.site.voila.fr
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://intersite.site.voila.fr

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

1.jpg 25 050 octets
image.htm 5 586 octets
index.htm 5 541 octets

Télécharger le zip

Historique

14 mai 2006 20:30:10 :: verifier le zip
17 avril 2009 04:08:36 :: !
18 avril 2009 10:29:36 :: !

Sources du même auteur

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS...

DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E...

DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES...

AUTO MANUEL PARAGRAPHES, DIAPO PARAGRAPHES OU AUSSI PROJECTE...

CONFORTABLE AUTO DÉFILEMENT OU (SCROLL BAR) TOUT AUTOMATIQUE...

Toutes les sources de abdelaziz_info

Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

DIAPORAMA SIMPLE PAR IFRAME par sartoz

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

IMAGES DANS UN TABLEAU AUTOMATIQUE par adelvian

ANIMATION EN JAVA SCRIPT par abdelaziz_info

LA PAGE ÉLÉGANTE OU AUSSI LA PAGE DÉFILANTE SUR L'ÉCRAN par abdelaziz_info

Commentaires et avis

Commentaire de jypees le 19/08/2007 01:39:46

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 ;)

Commentaire de abdelaziz_info le 01/09/2007 02:14:38

salut: jypees
Tu vois mal les choses !!!!!
Aller bon courage.

Commentaire de jypees le 01/09/2007 03:04:36

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)

Commentaire de abdelaziz_info le 02/09/2007 05:47:09

À : 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.

Commentaire de jypees le 02/09/2007 11:44:33

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é ...

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Probléme d'affichage d'une image redimensionnée [ par atract ] Bonjour!J'ais sur le site que je suis en train de developper une fonction javascript sevant à redimensionner des images : function redimImage(inImg, i Une [image] fixe qui suis la souris [ par ptitsky ] Bonjour à tous ,Mon pb :Je voudrai faire qu'une image suivent le mouvement de la souris, mais, que un bout de cette meme image reste au meme endroit.E pop up a la taille de l'image [ par attentio ] salut a tous !j'aimerais savoir comment faire pour afficher une pop up qui se redimensionne a la taille de l'image (qui est a l'intérieur)et si l'imag Taille Image sans document.images[0]..... [ par jdaviaud ] Voila,Ce que je recherche, c'est une fonction qui me permet de connaitre la largeur et la hauteur d'une image depuis son urlen gros j'ai ma variable t Help ! Probleme de taille d'image dans popup... [ par franck453 ] Bonjour,J'ai repiqué une partie de code sur un site, car il correspondait bien à ce que je voulais faire...A savoir : au survole d'un lien, taille de page [ par overbrave ] Salut Dieu du code, j'ai chercher mais n'ai pas trouver...Coment peut on définir la taille d'une page et quel reste a sa taille défini?Je pa Comment recuperer la taille d'une image [ par wolfcyber ] bonjour,J'aimerais savoir comment recuperer la dimension d'une image, merci d'avance.julien mouvement images en Javascript [ par kartoon ] Bonjour,J'ai plusieurs cas de figure  et de faire la plus réalisable :Je voudrais  avoir le moyen de pouvoir intervertir des images (3) image redimensionnée si taille depassant max [ par kishkaya ] Bonjour je suis tres php et le javascript j'y connais casiment rien mais j'en ai pourtant besouin pour la page d'inscription de mon site, j'aimerai cr Problème d'affichage du fond d'écran [ par webmasterette ] Bonjour tout le monde!Je suis nouvelle sur ce site et je me suis dit que ce forum était fait pour moi!En effet, AU SECOURS!!!J'ai un problèm

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP