Au fait, j’avais pas quelque chose de prévu pour demain moi ?

Et oui, demain c’est le premier avril. Comme chaque année vous allez pouvoir vous amuser à accrocher des poissons aux dos de vos amis, et éplucher les informations pour trouver les plus improbables… Mais cette année, Bewise vous propose encore mieux !

Et oui, la Bewise Day Conference est de retour dès demain, avec tout plein de technos, du développement, de l’IT, et des tables Surface !

[BDC2010] Venez rencontrer Hyper D, notre super héros admin réseau

Cher ami, lecteur assidu de mon blog, tu sais déjà que la Bewise Day Conference aura lieu le 1er avril prochain à Toulouse… Mais malheureusement, pour une raison qui m’échappe, tu ne t’es peut-être pas encore inscrit.

C’est vraiment dommage, puisque la BDC sera pour toi une occasion unique de rencontrer Hyper D, notre super héros admin réseau ! Voici un petit aperçu de ses pouvoirs :

Si tu veux savoir comment notre admin réseau arrive faire plusieurs choses à la fois, viens découvrir la virtualisation avec Hyper-V à la BDC 2010 !

La manière propre de faire des roll-over en html/css

Aujourd’hui, on va faire du html, et du css. Pas d’asp, pas de JavaScript, on fait du web pur et dur. Je vous propose de faire un effet de roll-over sur une image.

Alors je vous entend tous râler, comme quoi c’est trop simple, qu’on a 10000 codes sources qui fonctionnent sur Google, et que je vous avais habitué à mieux. Certes, on a des codes sources qui fonctionnent, mais ils ne sont pas toujours très propres… Comme j’ai dis en introduction, on va faire ici un roll-over uniquement avec du css, pas de javascript. Et petit bonus, ma technique va éviter un problème qu’on rencontre souvent sur des images en roll-over : pas besoin d’attendre que la souris passe sur l’image pour charger la seconde image.

Mais fini de papoter, voyons comment faire :

Pour commencer, il me faut mes deux images : celle affichée normalement, et celle affichée lorsque la souris passera dessus. Et attention, c’est là qu’est toute l’astuce, on va mettre le 2 dans un seul fichier image, comme ça :

(je n’accepterai aucune remarque sur le bon goût de mes images, et je rappelle que je n’ai jamais prétendu être designer ;)

Maintenant, on va afficher ça dans notre page. D’un point de vue HTML, on va tout simplement faire un lien (pas de balise <img> ici) :

<a class="rolloverLink" href="journuit.html">
    aller vers la page jour / nuit</a>

Et on va afficher notre image à l’aide de CSS. Pour ça, on a plusieurs étapes :

• Faire passer le lien en affichage de type block, et définir sa taille de manière à n’afficher que la moitié de notre fichier image.
• Mettre l’image en fond, et l’aligner en haut.
• Sur le hover, changer l’alignement pour qu’on voie l’autre moitié de l’image.
• Et pour ne pas qu’on voie le texte, on va le décaler loin en dehors de la page. Notez qu’il est tout de même important de laisser un texte pour des raisons d’accessibilité (pensez aux mal-voyants qui utilisent des navigateurs spécifiques)

On a donc notre CSS :

a.rolloverLink 
{
    text-indent:-10000px;
    display:block;
    width:80px;
    height:50px;
    background-image:url('rollover.png');
    background-position:top;
}

a.rolloverLink:hover
{
    background-position: bottom;
}

Ce qui nous donne le résultat suivant :

aller vers la page jour / nuit

Un grand merci à Jocelyn, responsable du domaine métier SWA (Solutions Web Avancées) chez Bewise, pour l’astuce !

Au passage, je vous rappelle que vous pourrez nous retrouver tous les deux, ainsi que toute l’équipe de Bewise et de Vertice, le 1er avril prochain lors de la Bewise Day Conference. N’hésitez pas à vous inscrire.

En avant pour la Bewise Day Conference 2010 !

A la demande générale, la Bewise Day Conference est de retour pour une 4ème édition ! Encore une fois, venez découvrir ce qui se fait de mieux dans les technologies Microsoft.

Cette année, beaucoup de nouveautés, puisque Microsoft lance la gamme 2010 de ses produits, notamment Visual Studio, Sharepoint, mais lance aussi la version 4 de son framework .net, MVC 2, Azure, et bien d’autres choses.

Je vous donne donc rendez-vous au stade Ernest Wallon, pour vous présenter ASP.NET, dans sa version 4, ainsi que ASP.NET MVC, et jQuery.

Pour les inscriptions, rendez-vous sur le site officiel de la BDC 2010.