Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Autre (graphismes)... > Insérer texte sur image

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Insérer texte sur image

Répondre
La question
Posté le 10 Août 2017 à 17:06
canvas

483 messages
Inscrit le 17/1/2008
Bonjour,
Je souhaiterai savoir comment faire pour insérer un texte ou une photo sur une image afin que ce texte ou cette photo apparaisse lorsque la souris passe sur l'image.
Merci de votre aide
Canvas

 
Navigateur utilisé : Firefox

 
Posté le 10 Août 2017 à 17:52
adrien-support

Bonjour Canvas,

Faire apparaître du contenu au passage de la souris n'est pas possible actuellement sur Wifeo, à moins que vous sachiez modifier votre code HTML / CSS.

Mais c'est une proposition de fonctionnalité intéressante que nous inclurons dans les prochaines évolutions de l'éditeur.

 
Navigateur utilisé : Chrome

 
Posté le 11 Août 2017 à 11:07
canvas

483 messages
Inscrit le 17/1/2008
Merci Adrien pour votre réponse,
Ce serait vraiment cool comme nouvelle fonctionnalité!
N'hésitez pas à nous tenir informer, en attendant je vais essayer de regarder comment modifier le code html/css.
Si vous avez des conseils n'hésitez pas
Canvas

 
Navigateur utilisé : Firefox
 
Posté le 12 Août 2017 à 17:12
Bonjour,
J'ai trouvé ce que j'aimerai faire pour mon site. Cela s'apparenterait à ce que l'on peut voir sur cette page.
https://www.queness.com/resources/htm [...] ndex.html
J'ai donc utilisé le code source de la page afin d'avoir un aperçu. J'ai trouvé comment modifier l'image ainsi que le texte mais l'effet ne fonctionne pas. Le texte ne s'affiche pas sur l'image et je ne comprends pas ce que je ne fais pas correctement.
Merci par avance
Canvas

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 12/8/2017 à 17:16:28.
 
Posté le 12 Août 2017 à 17:27
Pour info, voici le script inséré. Je modifie les images en remplaçant "gif1" "gif2"....
pour le reste tout est identique mais cela ne fonctionne pas. Si quelqu'un détecte une erreur n'hésitez pas à m'en faire part.

<meta content="This time we are going to learn to create another thumbnail effect with fading and transparent caption." name="description" /><script src="js/jquery-1.3.1.min.js"></script><script>

$(document).ready(function() {

//move the image in pixel
var move = -15;

//zoom percentage, 1.2 =120%
var zoom = 1.2;

//On mouse over those thumbnail
$('.item').hover(function() {

//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;

//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});

//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});

});

</script>
<style type="text/css">body {
font-family:arial;
}

.item {
width:250px;
height:250px;
border:4px solid #222;
margin:5px 5px 5px 0;

/* required to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
float:left;
}

.item .caption {
width:250px;
height:250px;
background:#000;
color:#fff;
font-weight:bold;

/* fix it at the bottom */
position:absolute;
left:0;

/* hide it by default */
display:none;

/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */

}

.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:16px;

/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}

.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}

.item img {
border:0;

/* allow javascript moves the img position*/
position:absolute;
}

.clear {
clear:both;
}
</style>
<div class="item"><a href="#"><img alt="Peintures" height="250" src="1.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>
<div class="caption" style="display: none;"><a href="">Peintures</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Boutique en Ligne" height="250" src="2.gif" title="" width="250" /></a>

<div class="caption"><a href="">Boutique en Ligne</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Sculptures" height="250" src="3.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>

<div class="caption" style="display: none;"><a href="">Sculptures</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="clear">&nbsp;</div>

<div class="item"><a href="#"><img alt="Expositions" height="125" src="4.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>

<div class="caption" style="display: none;"><a href="">Expositions</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Défiscalisations" height="250" src="5.gif" title="" width="250" /></a>

<div class="caption"><a href="">D&eacute;fiscalisations</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Contact" height="250" src="6.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>

<div class="caption" style="display: none;"><a href="">Contact</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="clear">&nbsp;</div>
<!-- START: Ignore this, not required by this tutorial --><script type="text/javascript">
if (typeof jQuery === 'undefined') document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>');
var url = 'http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery';
var title = 'Create A Thumbnail With Fading Caption Using jQuery';
var content = '<p>This time we are going to learn to create another thumbnail effect with fading and transparent caption.</p>';
</script><script type="text/javascript" src="http://www.queness.com/assets/js/demo.js"></script><!-- END -->

 
Navigateur utilisé : Firefox
 
Posté le 12 Août 2017 à 19:07
Je pense avoir compris mais j'aimerai une confirmation avant de faire une bêtise.
Il y a un fichier css à créer et à intégrer dans la page html c'est bien cela?

Je pense que ce doit être cette partie du script:

.item {
width:250px;
height:250px;
border:4px solid #222;
margin:5px 5px 5px 0;

/* required to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
float:left;
}

.item .caption {
width:250px;
height:250px;
background:#000;
color:#fff;
font-weight:bold;

/* fix it at the bottom */
position:absolute;
left:0;

/* hide it by default */
display:none;

/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */

}

.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:16px;

/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}

.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}

.item img {
border:0;

/* allow javascript moves the img position*/
position:absolute;
}

.clear {
clear:both;
}
</style>
<div class="item"><a href="#"><img alt="Peintures" height="250" src="1.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>
<div class="caption" style="display: none;"><a href="">Peintures</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Boutique en Ligne" height="250" src="2.gif" title="" width="250" /></a>

<div class="caption"><a href="">Boutique en Ligne</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Sculptures" height="250" src="3.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>

<div class="caption" style="display: none;"><a href="">Sculptures</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="clear">&nbsp;</div>

<div class="item"><a href="#"><img alt="Expositions" height="125" src="4.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>

<div class="caption" style="display: none;"><a href="">Expositions</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Défiscalisations" height="250" src="5.gif" title="" width="250" /></a>

<div class="caption"><a href="">D&eacute;fiscalisations</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#"><img alt="Contact" height="250" src="6.gif" style="width: 250px; display: block; height: 250px; top: 0px; left: 0px;" title="" width="250" /></a>

<div class="caption" style="display: none;"><a href="">Contact</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="clear">&nbsp;</div>
<!-- START: Ignore this, not required by this tutorial --><script type="text/javascript">
if (typeof jQuery === 'undefined') document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>');
var url = 'http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery';
var title = 'Create A Thumbnail With Fading Caption Using jQuery';
var content = '<p>This time we are going to learn to create another thumbnail effect with fading and transparent caption.</p>';
</script><script type="text/javascript" src="http://www.queness.com/assets/js/demo.js"></script><!-- END -->


Pour la première partie quand à elle, elle est à insérer sur la page html simplement

Merci aux experts de m'aider

Canvas

 
Navigateur utilisé : Firefox

 
Posté le 13 Août 2017 à 0:41
adrien-support

Bonsoir !

Malheureusement je ne peux pas vous aider car nous ne connaissons pas d'ou vient ce code ni comment il est construit !

Si vous décidez de modifier le code source de votre page et d'y insérer un code autre que le notre, c'est que vous vous considérez alors suffisamment expert pour prendre la responsabilité des bugs que vous pourriez créez.

Si vous souhaitez avoir une aide pour votre code, le mieux serait d'aller s'adresser directement à un forum spécialisé en html/css.

 
Navigateur utilisé : Chrome

 
Posté le 13 Août 2017 à 17:14
canvas

483 messages
Inscrit le 17/1/2008
Bonjour,

Connaissez vous un forum spécialisé en html/css sympa qui pourrait m'aider?

 
Navigateur utilisé : Firefox
 
Posté le 14 Août 2017 à 16:15
Bonjour,
J'ai trouvé ce lien où sont proposés plusieurs effets de survol avec les différents codes.
http://epicadesign.fr/css3-des-effets [...] l-dimage/
De mon côté, je souhaite insérer le code "oscar".
J'insère donc sur le html le code ainsi que le code css dans le fichier css. Néanmoins, je ne parviens pas à caler l'effet de survol sur mon image car le survol est de dimension différente.
Quelqu'un sait-il quel code ajouter pour redimensionner l'effet et où l'ajouter?
Merci d'avance
canvas

NB: Merci pour votre aide Adrien. Je dois avouer que je suis novice en informatique néanmoins j'adore essayer et comprendre comment cela fonctionne quitte à faire quelques erreurs... essayer ... puis réessayer... mais enfin comprendre et réussir

 
Navigateur utilisé : Firefox

 
Posté le 14 Août 2017 à 16:22
adrien-support

Et vous faites bien ! C'est comme cela qu'on apprend.

Je vous informais simplement que mes collègues et moi-même ne pouvions plus passer du temps à explorer les bugs générés par du codes tiers comme auparavant, face à la quantité de travail que nous avons sur Wifeo.

J'espère que tous les Wifeonautes ne sont pas partis en vacances et pourront vous aider !

 
Navigateur utilisé : Chrome

 
Posté le 14 Août 2017 à 17:14
canvas

483 messages
Inscrit le 17/1/2008
Bien sûr, cela se comprend tout à fait! Et vous faites déjà beaucoup pour améliorer chaque jour wifeo (d'ailleurs merci pour cela)
Ne vous en faite pas, je cherche et demande partout où je le peux afin d'avoir les réponses à mes questions...
Et qui sait, peut-être que quelqu'un qui a l'habitude de ce langage informatique me répondra.
En tout les cas, j'espère avoir la chance de comprendre d'où vient mon erreur...

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 14/8/2017 à 17:15:21.

 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES