Image qui change au noir avec texte au de la passage souris Fermé

Question

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

Configuration: Mac OS X Lion (10.7.5) / Chrome 25.0.1364.172

epitale · Answer

bonsoir Cyril,
regardes le code source du site exemple 

 
--

cyril · Answer

Bonsoir ! Oui alors j'ai regardé le code il y a ça dedans qui semble être ce qui me concerne : "

Type Experiment

" 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...

cyril · Answer

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...

cyril · Answer

ok merci !
Vous êtes concis ! :)

cyril · Answer

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

cyril · Answer

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

melbassa · Answer

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.

Image qui change au noir avec texte au de la passage souris

7 réponses

Discussions similaires