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

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (abdelaziz_info)