vue Un avis sur un bout de code Html/Css
Kommunauty
Connexion
Inscription

Forum Programmation Un avis sur un bout de code Html/Css

Un avis sur un bout de code Html/Css


Ryu Messages : 1973

M'voilà, je me devais de faire un petit truc pour un site, et au lieu de proser pendant 50 lignes, voici un lien pour voir le rendu:

http://pacs-man.co.be/Diablus/bandeau.php

Alors voilà, pour arriver à ça, j'ai fais du "bricolage" c'est à dire que j'ai éxagérément augmenter la taille de police des liens que j'ai ensuite rendu transparent via la propriété css opacity pour qu'on puisse cliquer et être rediriger. (donc en gros le but était d'avoir des images cliquables qui changent au passage du curseur). Seulement voilà, je trouve pas vraiment ça super propre, vous en pensez quoi ?

<div id="diablus_tube"><a style="opacity : 0.0; filter : alpha(opacity=0); zoom: 1;" href="http://*******">Diablus</a></div><div id="diablus_forum"><a style="opacity : 0.0; filter : alpha(opacity=0); zoom: 1;" href="http://*******">Diablus</a></div><div id="diablus_news"><a style="opacity : 0.0; filter : alpha(opacity=0); zoom: 1;" href="">Diablus</a></div>
                
/*	
	a:link
{
	text-decoration: none;
	opacity : 0.0;
	filter : alpha(opacity=0);
	zoom: 1;
	
}
a:visited 
{
	text-decoration: none;
	opacity : 0.0;
	filter : alpha(opacity=0);
	zoom: 1;
}
a:hover
{
	text-decoration: none;
	opacity : 0.0;
	filter : alpha(opacity=0);
	zoom: 1;
}
a:active
{
	text-decoration: none;
	opacity : 0.0;
	filter : alpha(opacity=0);
	zoom: 1;
}
	*/
	
#diablus_tube {

width:200px;

height:100px;

position:absolute;

left: 5px; 

margin-left: 0px; 

top:5px;

background-image:url('http://img.myzupics.com/aa/ao0.png');

font-size: 60px;



}

#diablus_tube:hover {

background-image:url('http://img.myzupics.com/aa/p75.png');

}



#diablus_forum {

width:200px;

height:100px;

position:absolute;

left: 205px; 

margin-left: 0px; 

top:5px;

background-image:url('http://img.myzupics.com/aa/173.png');

font-size: 60px;



}

#diablus_forum:hover {

background-image:url('http://img.myzupics.com/aa/257.png');

}




#diablus_news {

width:200px;

height:100px;

position:absolute;

left: 405px; 

margin-left: 0px; 

top:5px;

background-image:url('http://img.myzupics.com/aa/778.png');

font-size: 60px;



}

#diablus_news:hover {

background-image:url('http://img.myzupics.com/aa/t81.png');

}

Ou peut-être qu'il existe une technique spécifique adaptée ?
mardi 2 aout 2011 (Dernière édition mardi 2 aout 2011)

Mizur Messages : 6615

MAIS WTF?! C'est quoi ces trucs de opacity j'sais pas quoi?!

Tu mets une div genre "div class = "diableforum"" avec un <a> dedans, au css tu dis que le background de la div c'est l'image, et après toujours en css diableforum:hover avec un nouveau background et voilà...!

J'ai pas du tout compris l’intérêt de toutes ces lignes de code de fou avec un texte en transparent dessus  !
mardi 2 aout 2011 (Dernière édition mardi 2 aout 2011)

Ryu Messages : 1973

Ah bah voilà ! Je l'avais dis que ça me semblait pas très propre.

C'pour ça que j'demandais un avis.
mardi 2 aout 2011

Mizur Messages : 6615

Ah j'me disais "MER IL EST FOU, qu'est ce que j'ai raté?! Son code il fait le café au petit dej ou quoi? Pourquoi il utilise un truc si chaud?!"

J'ai encore mieux.

<input type="image" title="titre-de-l'image" onmouseout="this.src='url-de-l'image-de-base'" onmouseover="this.src='url-de-l'image-en-hover'" src="url-de-l'image-de-base">

C'est pas génial?
mardi 2 aout 2011

Lucas Messages : 830

WTF les enfants, MER VOUS ÊTES TOUS FOU À LIER MA PAROLE ?!!

ON MET PAS DU JS POUR MODIFIER DES IMAGES !!!

c'est tout con à faire :


<a href="#" id="diablo_tube">Diablus lien 1</a>
<a href="#" id="diablo_forum">Diablus lien 2</a>
<a href="#" id="diablo_news">Diablus lien 3</a>
a {
    display:block;
    width:200px;
    height:100px;
    float:left;
    text-indent:-9999px; 
}

#diablo_tube {
    background:url(images/diablo_tube.jpg) left top no-repeat;
}
#diablo_forum {
    background:url(images/diablo_forum.jpg) left top no-repeat;
}
#diablo_news {
    background:url(images/diablo_news.jpg) left top no-repeat;
}
#diablo_tube:hover {
    background:url(images/diablo_tube2.jpg) left top no-repeat;
}
#diablo_forum:hover {
    background:url(images/diablo_forum2.jpg) left top no-repeat;
}
#diablo_news:hover {
    background:url(images/diablo_news2.jpg) left top no-repeat;
}

non mais on aura tout vu...
mardi 2 aout 2011 (Dernière édition mardi 2 aout 2011)

Mizur Messages : 6615

MAIS J'L'AI DIT LE COUP DES DIV AVEC DU HOVER DÉJÀ, AAARH MER IL EST FOU C'T'ENFANT !!!

ET LE JS C'EST POUR ÊTRE ENCORE PLUS COURT ! PARCE QUE C'EST PAS LA TAILLE QUI COMPTE VAS !
mardi 2 aout 2011

KaySix Messages : 494

Sinon y a la technique qui consiste à avoir une image globale (image de base et image hover) et de dire que je veux que tel endroit s'affiche quand je fais rien, que tel endroit s'affiche quand j'mets ma souris dessus, etc.

Du coup, ça charge l'image dès l'ouverture du site et c'est beaucoup plus fluide !
mardi 2 aout 2011

Mizur Messages : 6615

Oui c'est vrai c'est presque ce dont FELK parlait dans son article sur Optimiser son blog au chapitre "CSS Sprites". Autrement en JS ça se fait aussi, des images qui slident immédiatement et c'est très fluide !
mardi 2 aout 2011

KaySix Messages : 494

Moi j'ai découvert la technique au taf, en étudiant un des sites de mon entreprise (par curiosité)...

mardi 2 aout 2011

Ryu Messages : 1973

Boarf, j'ai fait selon mon intuition, rien de plus. En ce qui concerne l JS de toute façon, j'en connais pas un mot.
mardi 2 aout 2011

Page suivante »
Pages : 01

Forum Programmation Un avis sur un bout de code Html/Css

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS