ACCUEIL
CREER UN FORUM
TOP FORUMS
COMMUNAUTE
FORUM D'ENTRAIDE
ESPACE MEMBRE
 
 
FAQ FAQ   Search Search     Register
It is currently Wed 10 Feb 2010 - 08:47 - créer un forum

Mettre un effet sur vos images

Skip to content

Post new topic Reply to topic Goto page: 1, 2  >
Mettre un effet sur vos images
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 57,289
Point(s): 68,652
Moyenne: 1.20
Firefox Mac
PostPosted: Mon 18 Aug 2008 - 14:53    Post subject: Mettre un effet sur vos images Reply with quote
  • Titre: mettre un effet sur vos images 
  • Version:1.0 

  • Auteur: themalin
  • Contact Auteur: Messagerie privé
  • Source:xooit

  • Description:bonjour

    si vous avez envi de mettre des effets quand on passe la souris sur vos images     

  • Niveau d'installation: Facile,
  • Temps d'installation:5 min 
  • Nombre de template(s) à modifier :un ou deux

  • Fonctionne sur les thèmes :xooit
  • Test(s) effectué(s) sur :Xooit, Phpbb, 

  •  Défaut(s) :l'image peut garder l'effet même après etre passer dessus
  •  Exemple(s) : http://themalin.xooit.fr  


    Installation :

    Sauvegardez vos templates, images avant toutes modifications




Faites Flèche Panneau admin Flèche Thème Flèche Modifier les templates Flèche Overall header Flèche cherchez Flèche


 
Code: Sélectionner - Agrandir
</head> 


juste avant mettez ceci

 
Code: Sélectionner - Agrandir

<script language="JavaScript">
function makevisible(cur,which)
{
if(document.getElementById)
{
if (which==0)
{
if(document.all)
cur.filters.alpha.opacity=100
else
cur.style.setProperty("-moz-opacity", 1, "");
}
else
{
if(document.all)
cur.filters.alpha.opacity=40
else
cur.style.setProperty("-moz-opacity", .4, "");
}
}
}
</script>  
vous pouvez changer les valeur ici


 
Code: Sélectionner - Agrandir
cur.style.setProperty("-moz-opacity", 1, "");  


et


 
Code: Sélectionner - Agrandir
cur.style.setProperty("-moz-opacity", .4, ""); 

 indiquant l'opacité de l'image quand vous ne passez pas le curseur dessus et quand vous le passez

ensuite dans votre template,module,ou description de sous forum voulu mettez ceci 



 
Code: Sélectionner - Agrandir
<img style="border: 0px solid ; opacity: 0.4;" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)"  src="lien de ton image"> 

 et changer le lien de votre image par celle voulue 

vous pouvez changer ici


 
Code: Sélectionner - Agrandir
style="border: 0px solid ; opacity: 0.4;" 
pour créer un effet de bordure et changer l'opacité de l'image

Fin du tuto
_______________________
Forum
Author Message
Yskander
Administrateur du forum

Offline
Administrateur du forum

Joined: 26 Jan 2008
Posts: 20,594
Point(s): 19,367
Moyenne: 0.94
PostPosted: Mon 18 Aug 2008 - 14:55    Post subject: Mettre un effet sur vos images Reply with quote
Génial
Je valide à 100%
_______________________
Yskander - Administrateur du forum de support Xooit.com
Support Technique - Nous ne fournissons aucune assistance par MP ou Mail.
Site | Forum | AnnuPlus | Etat du réseau | Forum de tests
Mes tutos | Top Sites Itinérien | Votre pub | Ma collection d'add-ons Firefox
Forum
Author Message
Yskander
Administrateur du forum

Offline
Administrateur du forum

Joined: 26 Jan 2008
Posts: 20,594
Point(s): 19,367
Moyenne: 0.94
PostPosted: Mon 18 Aug 2008 - 15:56    Post subject: Mettre un effet sur vos images Reply with quote
Je rajoute que si vous désirez utiliser ce tuto sur vos lien sur le portail (ceux qui sont modifiés via le panneau d'administration >> portail >> lien), allez dans :

pannea admin >> thème >> modifiez les templates >> modportal/ mod liens.tpl et remplacez
Code: Sélectionner - Agrandir


<td class="" align="center"> 


par
Code: Sélectionner - Agrandir


<td class="" align="center" style="border: 0px solid ; width: 88px; height: 31px; opacity: 0.4;" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)"> 



_______________________
Yskander - Administrateur du forum de support Xooit.com
Support Technique - Nous ne fournissons aucune assistance par MP ou Mail.
Site | Forum | AnnuPlus | Etat du réseau | Forum de tests
Mes tutos | Top Sites Itinérien | Votre pub | Ma collection d'add-ons Firefox
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 57,289
Point(s): 68,652
Moyenne: 1.20
Firefox Mac
PostPosted: Mon 18 Aug 2008 - 18:09    Post subject: Mettre un effet sur vos images Reply with quote
bonjour

merci tu as un exemple à donner
_______________________
Forum
Author Message
Yskander
Administrateur du forum

Offline
Administrateur du forum

Joined: 26 Jan 2008
Posts: 20,594
Point(s): 19,367
Moyenne: 0.94
PostPosted: Mon 18 Aug 2008 - 18:11    Post subject: Mettre un effet sur vos images Reply with quote
Je le prépare
C'est un peu long faut que je le rajoute sur le portail de mon fofo de test

EDIT : Voilà http://testpourinitinere.xooit.com/portal.php?pid=6
Le bloc affiché est le bloc de lien que l'on modifie via le panneau admin >> portail >> liens
_______________________
Yskander - Administrateur du forum de support Xooit.com
Support Technique - Nous ne fournissons aucune assistance par MP ou Mail.
Site | Forum | AnnuPlus | Etat du réseau | Forum de tests
Mes tutos | Top Sites Itinérien | Votre pub | Ma collection d'add-ons Firefox
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Thu 11 Dec 2008 - 13:49    Post subject: Mettre un effet sur vos images Reply with quote
Listing tuto de Sploutch
Recherche rapide
Contact
By Sploutch ©


Salutations,

Personnellement et après avoir testé bien sur les deux solutions, je préfère de loin et pas parce que c'est moi qui le propose, le code ci-dessous.

Le résultat est ressemblent, mais l'effet et mille fois meilleur (c'est mon avis)
Vous pouvez le voir en exemple sur cette page ICI ou encore sur cette autre page LA les boutons dans le bas et au centre de la page.
Passez la souris dessus.

Alors voila le code et explications pour ce mini tutoriel très léger et rapide.

Placez le code ci-dessous après les balises :


Code: Sélectionner - Agrandir
 <html>
    <head>




et entre

Code: Sélectionner - Agrandir

    </head>

    </body>
    </html>





Code: Sélectionner - Agrandir
<script language="JavaScript1.2">

    //Gradual-Highlight image script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    if (which2.style.MozOpacity)
    which2.style.MozOpacity=0.3
    else if (which2.filters)
    which2.filters.alpha.opacity=50
    }

    function highlightit(cur2){
    if (cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
    else if (cur2.filters&&cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }

    </script>





Positionnez le code sur votre image :


Code: Sélectionner - Agrandir
    <img src="LE LIEN ICI DE TON IMAGE BIEN SUR  " style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">


Modifie bien sur l'url de l'image !


Code: Sélectionner - Agrandir
<img src="LE LIEN ICI DE TON IMAGE BIEN SUR  " style="filter:alpha(opacity=30);



Particularité, pour les autres image sur votre page (la ou est le premier code) vous avez juste a ajouter le second code sur les images concerné par cette effet.

Fin du mini tutoriel.
By
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |

Last edited by Sploutch on Thu 11 Dec 2008 - 17:41; edited 3 times in total
Forum
Author Message
Yskander
Administrateur du forum

Offline
Administrateur du forum

Joined: 26 Jan 2008
Posts: 20,594
Point(s): 19,367
Moyenne: 0.94
PostPosted: Thu 11 Dec 2008 - 14:16    Post subject: Mettre un effet sur vos images Reply with quote
Idem
L'affichage de l'image non d'un coup mais en dégradé est du plus bel effet
Merci Sploutch
_______________________
Yskander - Administrateur du forum de support Xooit.com
Support Technique - Nous ne fournissons aucune assistance par MP ou Mail.
Site | Forum | AnnuPlus | Etat du réseau | Forum de tests
Mes tutos | Top Sites Itinérien | Votre pub | Ma collection d'add-ons Firefox
Forum
Author Message
R4PHAEL
Membre

Offline
Membre

Joined: 17 Mar 2008
Posts: 226
Niveau:
Point(s): 221
Moyenne: 0.98
Firefox Windows XP (ou plus ancien) Masculin Bélier (21mar-19avr) 鷄 Coq
PostPosted: Thu 11 Dec 2008 - 16:56    Post subject: Mettre un effet sur vos images Reply with quote
Ce serai possible d'appliquer ce script mais pour tout les images posté, mais sans avoir a mettre le second code et insérer les liens des images?

autre idée, j'aimerai l'appliquer sur le logo du forum, comment faire??
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 57,289
Point(s): 68,652
Moyenne: 1.20
Firefox Mac
PostPosted: Thu 11 Dec 2008 - 16:59    Post subject: Mettre un effet sur vos images Reply with quote
bonjour

oui tu suis les modif dans overall header

et pour ça
Code: Sélectionner - Agrandir

<img src="LE LIEN ICI DE TON IMAGE BIEN SUR  " style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">


tu vas dans bbcode tpl tu cherches

Code: Sélectionner - Agrandir
<!-- BEGIN img --><img src="{URL}" border="0" /><!-- END img -->


et tu mets comme ça
Code: Sélectionner - Agrandir

<!-- BEGIN img --><img src="{URL}" border="0" style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"/><!-- END img -->

_______________________
Forum
Author Message
R4PHAEL
Membre

Offline
Membre

Joined: 17 Mar 2008
Posts: 226
Niveau:
Point(s): 221
Moyenne: 0.98
Firefox Windows XP (ou plus ancien) Masculin Bélier (21mar-19avr) 鷄 Coq
PostPosted: Thu 11 Dec 2008 - 17:42    Post subject: Mettre un effet sur vos images Reply with quote
Merci themalin, toujours aussi efficace, mais hum les signatures aussi ont cet effet. On peut avoir l'un sans l'autre??
Par contre sur le logo ca prend pas
Décidément je suis très demandeur en ce moment.... Embarassed
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 57,289
Point(s): 68,652
Moyenne: 1.20
Firefox Mac
PostPosted: Thu 11 Dec 2008 - 17:49    Post subject: Mettre un effet sur vos images Reply with quote
si tu as mis les signatures avec du bbcode oui

tu peux essayer en mettant tes codes signatures directement en html

mais il faut activer le html dans message
configuration et activer la balise

img,
_______________________
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Thu 11 Dec 2008 - 17:59    Post subject: Mettre un effet sur vos images Reply with quote
R4PHAEL,
Pour ton logo il n'est pas dans ton overall_header.tpl il me semble si Wink ? tu as regardé ?
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
R4PHAEL
Membre

Offline
Membre

Joined: 17 Mar 2008
Posts: 226
Niveau:
Point(s): 221
Moyenne: 0.98
Firefox Windows XP (ou plus ancien) Masculin Bélier (21mar-19avr) 鷄 Coq
PostPosted: Thu 11 Dec 2008 - 20:05    Post subject: Mettre un effet sur vos images Reply with quote
pour autant que je puisse en juger non, mais sans en être sur...
mais d'après mon overall header non en effet
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 57,289
Point(s): 68,652
Moyenne: 1.20
Firefox Mac
PostPosted: Fri 12 Dec 2008 - 09:24    Post subject: Mettre un effet sur vos images Reply with quote
si tu parles du logo avec le nain dans overall header tu cherches

Code: Sélectionner - Agrandir
<td align="center"><a href="index.php"><img src="http://img4.xooimage.com/files/6/c/a/l7nok4-4aaf66.jpg" border="0" alt="les 7 Nains Index du Forum" vspace="1" /></a></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>


tu remplaces par

Code: Sélectionner - Agrandir
<td align="center"><a href="index.php"><img src="http://img4.xooimage.com/files/6/c/a/l7nok4-4aaf66.jpg" border="0" alt="les 7 Nains Index du Forum" vspace="1" style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"/></a></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td></tr>
_______________________
Forum
Author Message
Poloiste-LCK
Membre

Offline
Membre

Joined: 12 Jun 2007
Posts: 274
Niveau:
Point(s): 279
Moyenne: 1.02
Firefox Windows Vista ou Seven Masculin Taureau (20avr-20mai)
PostPosted: Sun 14 Dec 2008 - 00:28    Post subject: Mettre un effet sur vos images Reply with quote
Bonsoir,

J'aurais une question; comment je pourrais l'ajouté à se code ? :

Code: Sélectionner - Agrandir
<center><a href="http://fanatic-poloiste.xooit.fr/portal.php?pid=33"><img border="0" alt="Image Hosted by ImageShack.us" src="http://img261.imageshack.us/img261/412/bannireimagemap1xs1.gif" /></a><a href="http://fanatic-poloiste.xooit.fr/portal.php?pid=34"><img border="0" alt="Image Hosted by ImageShack.us" src="http://img261.imageshack.us/img261/6622/bannireimagemap2ze9.gif" /></a><a href="http://fanatic-poloiste.xooit.fr/portal.php?pid=6"><img border="0" alt="Image Hosted by ImageShack.us" src="http://img137.imageshack.us/img137/4646/bannireimagemap3xf0.gif" /></a></center>


Se code est enfaite une sorte de bannière composé de trois images qui envoie chacune sur une page différentes quand on clique dessus.

Et je voudrais que ces trois image soit comme le tuto proposé par Sploutch.

J'ai ajouter le code javascript dans mon templates mais je bloque au niveau des images...

Merci.
_______________________
Forum
Display posts from previous:   
Reply to topic Page 1 of 2 Goto page: 1, 2  >




Portal | Index | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Powered by phpBB © 2006 - 2009 phpBB Group |
 
© 2003-2009 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401