Image qui change au noir avec texte au de la passage souris
cyril
-
melbassa Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
melbassa Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerais exactement faire ça : http://wedonotsleep.com/
Aucune idée de comment faire...
J'ignore si sur le site en question ça switch d'une image à une autre ou si c'est concrêtement
juste du noir avec du texte...
Quoi qu'il en soit ce serait l'effet recherché....
J'ai bien compris que ça se passe je crois en CSS que je ne connais pas spécialement bien.
J'ai entendu parlé de plugin à intégrer au site ?
Est ce que quelqu'un pourrait m'aider ? pitié .... :)
Merci !
Cyril
J'aimerais exactement faire ça : http://wedonotsleep.com/
Aucune idée de comment faire...
J'ignore si sur le site en question ça switch d'une image à une autre ou si c'est concrêtement
juste du noir avec du texte...
Quoi qu'il en soit ce serait l'effet recherché....
J'ai bien compris que ça se passe je crois en CSS que je ne connais pas spécialement bien.
J'ai entendu parlé de plugin à intégrer au site ?
Est ce que quelqu'un pourrait m'aider ? pitié .... :)
Merci !
Cyril
A voir également:
- Image qui change au noir avec texte au de la passage souris
- Changer de dns - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Extraire texte d'une image - Guide
- Passage qwerty azerty - Guide
- Écran noir au démarrage - Guide
7 réponses
Bonsoir !
Oui alors j'ai regardé le code il y a ça dedans qui semble être ce qui me concerne :
"<div id='img-container'>
<div class='picture_holder' id='node113' style='width: 215px; height: 215px;'>
<div class='picture' style='width: 200px;'>
<div style='padding-top: 0;'>
<a href='http://wedonotsleep.com/work/type-experiment/' class='link'><img src='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' width='200' height='200' alt='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' /></a>
</div>
<div class='captioning'><div class='title'>Type Experiment</div></div>
</div>
</div>"
Mais bien entendu ça ne marche pas tout seul...
Et je suis une quiche en programmation...
J'imagine qu'il faut un code css ailleur et/ou un plugin pour faire fonctionner ce code...
Enfin bref c'est pas gangé...
Help...
Oui alors j'ai regardé le code il y a ça dedans qui semble être ce qui me concerne :
"<div id='img-container'>
<div class='picture_holder' id='node113' style='width: 215px; height: 215px;'>
<div class='picture' style='width: 200px;'>
<div style='padding-top: 0;'>
<a href='http://wedonotsleep.com/work/type-experiment/' class='link'><img src='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' width='200' height='200' alt='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' /></a>
</div>
<div class='captioning'><div class='title'>Type Experiment</div></div>
</div>
</div>"
Mais bien entendu ça ne marche pas tout seul...
Et je suis une quiche en programmation...
J'imagine qu'il faut un code css ailleur et/ou un plugin pour faire fonctionner ce code...
Enfin bref c'est pas gangé...
Help...
le css associé
<style>
#img-container #text { float: left; width: 200px; padding-right: 15px;250px; }
#img-container #text p { width: 250px; }
#img-container .picture_holder { float: left; font-weight: ; color: #ffffff;}
#img-container .picture { position: relative; text-align: left; }
#img-container .picture { width: 200px; }
#img-container .picture a:hover { opacity: 0; }
#img-container .picture { background: #; height: 200px; z-index:1; background-image:url('http://wedonotsleep.com/images/backback.png')}
#img-container .picture_holder { padding: 0 0 0 0; }
#img-container .captioning { position: relative; z-index:-1; height: 0px; text-align: left;width: 200px; }
#img-container .captioning .title { text-align: center; position: relative; z-index:1; margin-top: -200px; padding-left: 0px; padding-top: 88px; background: #;}*/
<style>
#img-container #text { float: left; width: 200px; padding-right: 15px;250px; }
#img-container #text p { width: 250px; }
#img-container .picture_holder { float: left; font-weight: ; color: #ffffff;}
#img-container .picture { position: relative; text-align: left; }
#img-container .picture { width: 200px; }
#img-container .picture a:hover { opacity: 0; }
#img-container .picture { background: #; height: 200px; z-index:1; background-image:url('http://wedonotsleep.com/images/backback.png')}
#img-container .picture_holder { padding: 0 0 0 0; }
#img-container .captioning { position: relative; z-index:-1; height: 0px; text-align: left;width: 200px; }
#img-container .captioning .title { text-align: center; position: relative; z-index:1; margin-top: -200px; padding-left: 0px; padding-top: 88px; background: #;}*/
Génial ! Merci beaucoup !
Par contre maintenant je vais vous ennuyer avec des questions de débutant...
J'ai tenté ci dessous d'être concis
et de poser les questions du mieux que je peux histoire de ne pas vous prendre trop votre temps.
Je construis mon site avec indexhibit, je ne sais pas si vous connaissez,
c'est un éditeur de site qui possède une interface graphique sans code pour construire ses pages.
néanmoins on peut y rentrer du code si on le souhaite....
J'ai à ma disposition les fichiers CSS suivant :
ie.css
style.css
Le code que vous m'avez donné va dans style.css ou ie.css ?
Je copy paste votre code dans le fichier .css tel quel à la suite ?
Ci dessous mon fichier style.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: Verdana, Verdana;
font; color: #364074;
background: #C6C6C6;
}
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; color: #565656; font-weight: }
a:active { text-decoration: none; color: #565656;font-weight: }
a:visited { text-decoration: none; color: #565656; font-weight: }
a:hover { text-decoration: none; color: #565656; font-weight: }
a img { border: none; }
#menu {
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
position: fixed;
height: 100%;
background-color: #C6C6C6;
font-size: 25px;
}
#menu ul {
list-style: none;
margin: 50px 0 12px 0;
}
#menu ul li.section-title {
font-size: 40px;
}
#content {
height: 100%;
margin: 0 0 0 215px;
top: ;
}
.container {
padding: 5px 5px 25px 5px;
}
#content p { width: 600px; margin-bottom: 9px; }
p {
margin: 0 0 9px 0;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }
h5 { font-size: 8px; }
h6 { font-size: 6px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; }
#once { clear: left; }
Ci dessous le contenu du fichier ie.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
#menu {
float: left;
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
position: fixed;
height: 100%;
background-color: #fff;
}
#content {
height: 100%;
margin: 0 0 0 215px;
top: 0;
}
* html div#menu {
width: 20%;
}
* html div#content {
height: 100%;
width: 80%;
overflow: auto;
position: absolute;
margin: 0;
}
img.png {
background-image: expression(
this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src +
"', sizingMethod='image')",
this.src = "/path/to/transparent.gif"
);
}
Merci beaucoup pour votre temps...
Par contre maintenant je vais vous ennuyer avec des questions de débutant...
J'ai tenté ci dessous d'être concis
et de poser les questions du mieux que je peux histoire de ne pas vous prendre trop votre temps.
Je construis mon site avec indexhibit, je ne sais pas si vous connaissez,
c'est un éditeur de site qui possède une interface graphique sans code pour construire ses pages.
néanmoins on peut y rentrer du code si on le souhaite....
J'ai à ma disposition les fichiers CSS suivant :
ie.css
style.css
Le code que vous m'avez donné va dans style.css ou ie.css ?
Je copy paste votre code dans le fichier .css tel quel à la suite ?
Ci dessous mon fichier style.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: Verdana, Verdana;
font; color: #364074;
background: #C6C6C6;
}
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; color: #565656; font-weight: }
a:active { text-decoration: none; color: #565656;font-weight: }
a:visited { text-decoration: none; color: #565656; font-weight: }
a:hover { text-decoration: none; color: #565656; font-weight: }
a img { border: none; }
#menu {
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
position: fixed;
height: 100%;
background-color: #C6C6C6;
font-size: 25px;
}
#menu ul {
list-style: none;
margin: 50px 0 12px 0;
}
#menu ul li.section-title {
font-size: 40px;
}
#content {
height: 100%;
margin: 0 0 0 215px;
top: ;
}
.container {
padding: 5px 5px 25px 5px;
}
#content p { width: 600px; margin-bottom: 9px; }
p {
margin: 0 0 9px 0;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }
h5 { font-size: 8px; }
h6 { font-size: 6px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; }
#once { clear: left; }
Ci dessous le contenu du fichier ie.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
#menu {
float: left;
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
position: fixed;
height: 100%;
background-color: #fff;
}
#content {
height: 100%;
margin: 0 0 0 215px;
top: 0;
}
* html div#menu {
width: 20%;
}
* html div#content {
height: 100%;
width: 80%;
overflow: auto;
position: absolute;
margin: 0;
}
img.png {
background-image: expression(
this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src +
"', sizingMethod='image')",
this.src = "/path/to/transparent.gif"
);
}
Merci beaucoup pour votre temps...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bon et bien ça ne marche pas...
Le fait est que je ne suis pas spécialiste et il doit y avoir une erreur de ma part.
Dans l'ordre :
-J'ai placé le code que vous m'avez passé dans fichier style.css
(j'ai enlevé le <style> placé au début)
Sur la page elle même j'ai mis le code suivant (en remplaçant les adresses):
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<div id='img-container'>
<div class='picture_holder' id='node113' style='width: 215px; height: 215px;'>
<div class='picture' style='width: 200px;'>
<div style='padding-top: 0;'>
<a href='http://wedonotsleep.com/work/type-experiment/' class='link'><img src='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' width='200' height='200' alt='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' /></a>
</div>
<div class='captioning'><div class='title'>Type Experiment</div></div>
</div>
</div>
Quelle étape j'ai raté ?
Merci de votre aide
Le fait est que je ne suis pas spécialiste et il doit y avoir une erreur de ma part.
Dans l'ordre :
-J'ai placé le code que vous m'avez passé dans fichier style.css
(j'ai enlevé le <style> placé au début)
Sur la page elle même j'ai mis le code suivant (en remplaçant les adresses):
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<div id='img-container'>
<div class='picture_holder' id='node113' style='width: 215px; height: 215px;'>
<div class='picture' style='width: 200px;'>
<div style='padding-top: 0;'>
<a href='http://wedonotsleep.com/work/type-experiment/' class='link'><img src='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' width='200' height='200' alt='http://wedonotsleep.com/files/dimgs/thumb_1x200_1_83_113.jpg' /></a>
</div>
<div class='captioning'><div class='title'>Type Experiment</div></div>
</div>
</div>
Quelle étape j'ai raté ?
Merci de votre aide
tu as bien appelé ton fichier style.css dans le <head></head> de ton index ?
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
==>href="css/style.css" css/ si le fichier style est dans un dossier nommé css
utilises l'extension firebug pour firefox, elle est quasi indispensable a chaque développement pour voir la source de certaines erreurs
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
==>href="css/style.css" css/ si le fichier style est dans un dossier nommé css
utilises l'extension firebug pour firefox, elle est quasi indispensable a chaque développement pour voir la source de certaines erreurs
Ah non j'utilise Chrome, je vais installer firefox et firebug merci du tuyau !
dans mon index l'adressage est comme ça :
%baseurl%><%basename%>/site/<%obj_theme%>/style.css
ça semble juste je crois.
Mais j'ai trouvé le problème il me semble...
Le site que j'ai donné en exemple a également été conça avec indexhibit.
Seulement il s'agit de la version 2 ....et moi je suis encore à la version 0.70....
Alors avant d'aller plus loin je ferais bien d'upgrader... j'en ai fait la demande, j'aurais
sans doute ça dans l'aprem.
Je reviens sur le forum plus tard pour dire si ça a marché.
Merci
dans mon index l'adressage est comme ça :
%baseurl%><%basename%>/site/<%obj_theme%>/style.css
ça semble juste je crois.
Mais j'ai trouvé le problème il me semble...
Le site que j'ai donné en exemple a également été conça avec indexhibit.
Seulement il s'agit de la version 2 ....et moi je suis encore à la version 0.70....
Alors avant d'aller plus loin je ferais bien d'upgrader... j'en ai fait la demande, j'aurais
sans doute ça dans l'aprem.
Je reviens sur le forum plus tard pour dire si ça a marché.
Merci
Bonjour,
Je vous donne un exemple de ce que j'aimerais faire https://www.mexique-voyages.com/ vous avez des photos du Mexique par thème d'activité avec un texte qui apparaît quand on passe la souris sur chacune des photos.
J'aimerais faire ça sur mon site sous wordpress.
Merci pour votre aide.
Je vous donne un exemple de ce que j'aimerais faire https://www.mexique-voyages.com/ vous avez des photos du Mexique par thème d'activité avec un texte qui apparaît quand on passe la souris sur chacune des photos.
J'aimerais faire ça sur mon site sous wordpress.
Merci pour votre aide.