Image qui s'ouvre
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Image qui s'ouvre
Bonsoir,
J'aimerais mettre une image sur le coté droit de mon forum, qui au clic s'ouvrirait pour laisser place à un texte ou à une image. Un peu comme une chatbox latérale mais en version image.
Merci d'avance pour votre aide.
Cordialement
J'aimerais mettre une image sur le coté droit de mon forum, qui au clic s'ouvrirait pour laisser place à un texte ou à une image. Un peu comme une chatbox latérale mais en version image.
Merci d'avance pour votre aide.
Cordialement
Dernière édition par Horatio le Jeu 21 Juil 2011 - 22:59, édité 1 fois
Re: Image qui s'ouvre
Bonsoir,
Ce code javascript :
Cordialement,
Ce code javascript :
- Code:
jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:1000;"><tr><td><img src="http://2img.net/i/fa/admin/icones/help.png" id="image" scrolling="no" style="width: 100%; height: 100%; display: none;" marginwidth="0" marginheight="0" frameborder="0"></img></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'image\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );
Cordialement,
Alex Fowl- Membre actif
-
Messages : 7557
Inscrit(e) le : 28/03/2009
Re: Image qui s'ouvre
Bonjour,
Merci pour votre aide, je vais tester ce code et je vous tiens au courant.
Cordialement
Merci pour votre aide, je vais tester ce code et je vous tiens au courant.
Cordialement
Re: Image qui s'ouvre
Bonjour,
J'ai utilisé votre code que j'ai modifié en insérant mon bouton ouvrir et mon bouton fermé, néanmoins sa ne marche pas.
Voici le code :
Et voici ce que j'ai mis dans Overall_footer :
Néanmoins l'image ne souvre pas.
Est ce que j'ai fais une erreur ?
Cordialement
Merci pour votre aide.
J'ai utilisé votre code que j'ai modifié en insérant mon bouton ouvrir et mon bouton fermé, néanmoins sa ne marche pas.
Voici le code :
- Code:
jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 450px; right: 40px;background-color: #ffffff;z-index:1000;"><tr><td><img src="http://2img.net/i/fa/admin/icones/help.png" id="image" scrolling="no" style="width: 100%; height: 100%; display: none;" marginwidth="0" marginheight="0" frameborder="0"></img></td><td style="vertical-align: bottom;"><img src="http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png" onClick="document.getElementById(\'http://www.picdo.net/fichiers/2011/7/18/eaf2533b-fce0-4d80-a727-00fde5c73b80_P.png\').style.display=(this.src==\'http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png\')?\'block\':\'none\';this.src=(this.src==\'http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png\')?\'http://www.picdo.net/fichiers/2011/7/18/2219a499-a5bf-4b38-aa6a-b99fb8a00357_239001.jpg\':\'http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png\';"/></td></tr></table>'); } );
Et voici ce que j'ai mis dans Overall_footer :
- Code:
<script type=text/javascript src=http://www.poudlardunivers.org/12854.js></script>
Néanmoins l'image ne souvre pas.
Est ce que j'ai fais une erreur ?
Cordialement
Merci pour votre aide.
Re: Image qui s'ouvre
Un petit up.
Cordialement
Cordialement
Re: Image qui s'ouvre
Bonsoir,
Sa serait parfait s'il vous plait.
Merci pour votre aide.
Cordialement
Sa serait parfait s'il vous plait.
Merci pour votre aide.
Cordialement
Re: Image qui s'ouvre
Bonjour
Vous pouvez essayer ceci
Allez dans modules -->Gestion des codes Javascript
- créer un nouveau javascript.
-mettez un titre par exemple:slide panel
-cochez sur toutes les pages et collez le code ci dessous et validez
Ensuite on fait un deuxième script que vous pouvez modifier pour l'effet souhaité.
on répète donc l'opération
Allez dans modules -->Gestion des codes Javascript
- créer un nouveau javascript.
-mettez un titre par exemple:slide réglages
-cochez sur toutes les pages et collez le code ci dessous et validez
*Dans ce code vous pouvez modifier la vitesse,la position de l'image droite ,gauche,haut ou bas etc..
la partie CSS
Affichage-->images et couleurs-->couleurs-->feuilles de styles CSS
et collez ce code et validez
et pour finir placer ce code en page d'accueil ou widget ou templates..
Cordialement.
Vous pouvez essayer ceci
Allez dans modules -->Gestion des codes Javascript
- créer un nouveau javascript.
-mettez un titre par exemple:slide panel
-cochez sur toutes les pages et collez le code ci dessous et validez
- Code:
/*
tabSlideOUt v1.3
By William Paoli: http://wpaoli.building58.com
To use you must have an image ready to go as your tab
Make sure to pass in at minimum the path to the image and its dimensions:
example:
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab -doesnt have to be an anchor
pathToTabImage: 'images/contact_tab.gif', //relative path to the image for the tab
imageHeight: '133px', //height of tab image
imageWidth: '44px', //width of tab image
});
or you can leave out these options
and set the image properties using css
*/
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '200px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings||{});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background' : 'url('+settings.pathToTabImage+') no-repeat',
'width' : settings.imageWidth,
'height': settings.imageHeight
});
}
settings.tabHandle.css({
'display': 'block',
'textIndent' : '-99999px',
'outline' : 'none',
'position' : 'absolute'
});
obj.css({
'line-height' : '1',
'position' : settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({'left' : settings.leftPos});
settings.tabHandle.css({'right' : 0});
}
if(settings.tabLocation === 'top') {
obj.css({'top' : '-' + properties.containerHeight});
settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'bottom') {
obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
settings.tabHandle.css({'top' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height' : properties.containerHeight,
'top' : settings.topPos
});
settings.tabHandle.css({'top' : 0});
}
if(settings.tabLocation === 'left') {
obj.css({ 'left': '-' + properties.containerWidth});
settings.tabHandle.css({'right' : '-' + properties.tabWidth});
}
if(settings.tabLocation === 'right') {
obj.css({ 'right': '-' + properties.containerWidth});
settings.tabHandle.css({'left' : '-' + properties.tabWidth});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event){
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({top:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({left:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({right:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
}
};
var clickScreenToClose = function() {
obj.click(function(event){
event.stopPropagation();
});
$(document).click(function(){
slideIn();
});
};
var clickAction = function(){
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function(){
obj.hover(
function(){
slideOut();
},
function(){
slideIn();
});
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function(){
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
Ensuite on fait un deuxième script que vous pouvez modifier pour l'effet souhaité.
on répète donc l'opération
Allez dans modules -->Gestion des codes Javascript
- créer un nouveau javascript.
-mettez un titre par exemple:slide réglages
-cochez sur toutes les pages et collez le code ci dessous et validez
- Code:
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://i49.servimg.com/u/f49/12/69/24/33/vid10.png', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 6000, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
*Dans ce code vous pouvez modifier la vitesse,la position de l'image droite ,gauche,haut ou bas etc..
la partie CSS
Affichage-->images et couleurs-->couleurs-->feuilles de styles CSS
et collez ce code et validez
- Code:
.slide-out-div {
padding: 20px;
width: 500px;
background: #ccc;
border: 1px solid #29216d;
}
et pour finir placer ce code en page d'accueil ou widget ou templates..
- Code:
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<img src="http://www.picdo.net/fichiers/2011/7/18/eaf2533b-fce0-4d80-a727-00fde5c73b80_P.png">
</div>
Cordialement.
Re: Image qui s'ouvre
C'est bon j'ai parfaitement réussi.
Merci pour votre aide.
Bonne soirée,
Bien Cordialement
Horatio
Merci pour votre aide.
Bonne soirée,
Bien Cordialement
Horatio
Sujets similaires
» chatbox lateral qui ne souvre pas
» taille d'une image affichée sur le forum ne correspondant pas avec l'image originale
» Tableau a Onglet : onglet qui ne souvre pas
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» [résolu] image "messages privés" remplacée par l'image "nouveau message privé"
» taille d'une image affichée sur le forum ne correspondant pas avec l'image originale
» Tableau a Onglet : onglet qui ne souvre pas
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» [résolu] image "messages privés" remplacée par l'image "nouveau message privé"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum