Superposer un lecteur MP3 java à une image

Chipeur59 · le 08 Mai 2010 17:39

Bonjour,
je viens de créer une page sur mon site en html et j y ai ajouté un lecteur MP3, seul petit soucis: il apparait à droite de l'image au lieu d'etre au niveau de la tache d encre blanche comme je le voudrais:

http://www.ma-propre-energie.com/index2

gael49 · le 15 Mai 2010 10:34

Salut !

Apparemment tu as enlevé la page index2 donc je ne pourrai pas te répondre pour le lecteur mp3 mais en voyant ton index j'ai 2 commentaires à faire :
- la page est trop grande pour un écran en 1024x768, c'est dommage car il reste encore beaucoup de gens qui utilisent cette résolution.
- Tout ton texte est contenu dans des images, donc pour le référencement ça va être très très difficile, les moteurs de recherche ne pourront pas lire le contenu de ton site, sans parler du temps perdu si tu veux le mettre à jour...

Skynet · le 15 Mai 2010 16:37

Salut,

le code de l'index2 était :

Code: Tout sélectionner: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>L.A OnLine - OFFICIAL WEBSITE -</title> <link rel="shortcut icon" type="image/x-icon" href="http://www.ma-propre-energie.com/icon.ico" /> <meta name="keywords" content=""> </head> <body> <center> <P> <map name="map1"> <AREA href="http://www.ma-propre-energie.com/house.htm" shape="poly" coords="626,448,776,437,779,460,628,470" title="Contact"> <AREA href="http://www.ma-propre-energie.com/house.htm" shape="poly" coords="812,430,992,428,992,452,807,452" title="Download"> <AREA href="http://www.ma-propre-energie.com/house.htm" shape="poly" coords="1025,428,1232,431,1233,454,1023,449" title="Wallpapers"> </map> <div id="background"; position:absolute; <img src="http://www.ma-propre-energie.com/index2.png" usemap="#map1" border="0"> <div id="player"; position:absolute; margin-left:170px; <br><center><object src="http://mp3player.poqbum.com/swf/5je9hgebab0e18dbbcef268fh5e658gc/mil2.swf" menu="false" quality="high" width="280" height="320" name="poqbum-dot-com" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playlist=http%3A%2F%2Fmp3player.poqbum.com%2Fswf%2F5je9hgebab0e18dbbcef268fh5e658gc%2Fmp3player.xml" wmode="transparent"></object></center><br><br> </div> </div> </center> </body> </html>

Mais si ce projet est abandonné, ça serait bien de le dire ici.

Chipeur59 · le 18 Mai 2010 06:14

J'ai réussi à placer le lecteur à l'endroit désiré : http://www.la-official.com
Le probleme c'est que j ai du me séparer de ma balise <center> qui etait apparemment responsable du leger deplacement du lecteur.
Auriez vous une solution pour center l image par rapport a la fenetre du navigateur tout en ayant le lecteur mp3 fixé au meme endroit de l image quoi qu il arrive?

Skynet · le 18 Mai 2010 09:19

Tu parles des marges blanches ?

Sinon.. ton code est sale. Tu ne respectes pas les standards du web W3C, tu as 39 avertissements !

Je viens de corriger ta page voici le code propre (regarde les différences) :

Code: Tout sélectionner: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ⓛ●ⓐ ·•●oO Official Website Oo●•· Officiel de L.A</title> <meta name="description" content="Site officiel du rapper L.A --- L.A Official Website --- Ecoutez ses morceaux en excluvité, téléchargez, regardez les vidéos en avant-première. Découvrez soirées organisées, concerts, showcase Achetez les albums, maxis et mixtapes. Last songs, exclusivities, videos, downloads " /> <meta name="keywords" content="rap hiphop hip hop french us fr 2pac tupac shakur notorious big section d assault rohff kery james booba diams burka lil wayne nord losc rcl lens division 1 lille I coupe du monde zidane ribery henry anelka world cup music instrumental sound wav mp3 producer casting nouvelle star show mickael jackson horaires billets pas cher banque occasion annonce recherche" /> <meta name="robots" content="all" /> <meta name="language" content="fr, en" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="shortcut icon" type="image/x-icon" href="icon.ico" /> <link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> </head> <body> <P> <MAP name="map1"> <AREA href="house.htm" shape="poly" coords="626,448,776,437,779,460,628,470" title="Contact"> <AREA href="house.htm" shape="poly" coords="812,430,992,428,992,452,807,452" title="Download"> <AREA href="house.htm" shape="poly" coords="1025,428,1232,431,1233,454,1023,449" title="Wallpapers"> <AREA href="http://www.myspace.com/1zoodigcrew" shape="rect" coords="712,891,822,1000" title="ZDC MySpace"> <AREA href="http://www.myspace.com/djkery" shape="rect" coords="837,892,947,1000" title="DJ Kery MySpace"> </MAP> <div id="body"> <img src="background.png" usemap="#map1" border="0"> </div> <div id="div1"> <object type="application/x-shockwave-flash" width="280" height="320" data="http://mp3player.poqbum.com/swf/5je9hgebab0e18dbbcef268fh5e658gc/mil2.swf"> <param name="movie" value="http://mp3player.poqbum.com/swf/5je9hgebab0e18dbbcef268fh5e658gc/mil2.swf" /> <param name="flashvars" value="playlist=http://mp3player.poqbum.com/swf/5je9hgebab0e18dbbcef268fh5e658gc/mp3player.xml" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="name" value="poqbum-dot-com" /> <param name="wmode" value="transparent" /> </object> </div> <div id="div2"><script type="text/javascript" src="http://www.ovnet.fr/cpt/?code=6/49/10152/7/2&ID=414831410"></script></div> <div id="div3"> <object type="application/x-shockwave-flash" width="200" height="150" data="http://www.dailymotion.com/swf/video/x4wapu&v3=1&related=1"> <param name="movie" value="http://www.dailymotion.com/swf/video/x4wapu&v3=1&related=1" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> </object><br /><center><b><a href="http://www.dailymotion.com/video/x4wapu_stickydick-mon-monde_music">StickyDick Mon Monde</a></b></center></div> </body> </html>

Et change ton fond en JPG au lieu de PNG, lorsque le taux de compression est bien choisi l'image peut être aussi belle.
Je viens de tester et on passe tout de même de 1355 ko à 287 ko sans perte (à l'oeil).

Par contre elle est un peu grande pour toutes les résolutions de tes visiteurs.

Chipeur59 · le 18 Mai 2010 22:10

Ok merci bcp de te pencher sur mon pb, c'est sympa, je comprends mieux en décortiquant le code que tu m'as fourni qu'en allant lire les tutos qu'on m'a indiqué sur d'autres forums et qui ne comprennent pas d'exemples..
Bref, pour les codes des div1 et 3 que tu as corrigé, ils ne sont pas de moi, je me suis contenté de copier celui fourni par les providers de lecteur mp3 et autre dailymotion...
Sinon, oui, je parle bien des marges blanches, en fait,
- soit je mets la balise center pour toute la page et je me retrouve avec un lecteur mp3 qui se balade legerement des que je retrecis/agrandis la fenetre du navigateur, mais au moins les marges blanches sont égales de part et d autre de l image
- soit je le laisse sans <center> et là j ai bien lecteur fixe mais une seule grosse marge blanche à droite de la fenêtre, j aimerais faire coïncider les 2, c'est possible?

Mon style css:
#body{
position:relative;
margin : 0 auto;
}

#div1{
position:absolute;
top:525px;
left:685px;
}

#div2{
position:absolute;
top:825px;
left:787px;
}

#div3{
position:absolute;
top:554px;
left:1005px;
}

Skynet · le 19 Mai 2010 14:00

De rien, ça m'a fait plaisir

.

Effectivement les erreurs venaient principalement des deux codes importés pour les players.

Sans eux, on passe de 39 avertissements à 4

:

- Le DOCTYPE manquant
- deux caractères spéciaux &#149 remplacés par &#8226
- balise </td> en trop

M'enfin bon tout est clean maintenant

.

Chipeur59 a écrit:j aimerais faire coïncider les 2, c'est possible?

Oui, tu dois juste revoir le début du CSS comme ceci :

Code: Tout sélectionner: #body{ position:relative; margin: -8px; margin-top: -16px; }

Chipeur59 · le 20 Mai 2010 07:11

Merci,
j'ai modifié le code html pour l index et ca marche nikel,
par contre, pour le css, j ai aussi changé la section body avec le margin et margin-top mais ca ne change rien: j ai toujours une seule marge à droite de l image :'(

Autant pour moi, ca fonctionne, il fallait juste regler le margin-left: avec une valeur positive de 57 j ai un background a peu pres centré..mais du coup j ai du decaler le lecteur mp3, le lecteur video et le compteur de 57px vers la droite aussi...

En tout cas ta solution etait la bonne, comme souvent j'imagine

Merci Skynet, merci pc-infopratique, les seuls à m avoir aidé sur 4 forums postés

)

Skynet · le 20 Mai 2010 13:40

Chipeur59 a écrit:Merci,
j'ai modifié le code html pour l index et ca marche nikel,

Yep je vois ça, plus d'erreur

.

Tiens cadeau : http://uppix.net/3/a/9/cf6c9dbf337ade57 ... 6289a1.jpg

Ton fond d'écran allégé pour tes visiteurs, perso je vois pas de différence avec le JPG sauf le poids.

Par contre oublie pas de l'enregistrer sous background.jpg et de modifier dans ton code html :

<div id="body">
<img src="background.jpg" usemap="#map1" border="0">
</div>

Ah oui, garde aussi ton background original dans tes archives pour des modifs futures, le PNG est plus pratique pour ça. Donc si tu changes quelque chose sur ton fond, tu le travailles en PNG et tu le convertiras ensuite en JPG.

Chipeur59 a écrit:Autant pour moi, ca fonctionne, il fallait juste regler le margin-left: avec une valeur positive de 57

Le margin-left c'était bien "margin" tout court que j'avais réglé à -8px. Si tu as une marge blanche à droite contrairement à moi sur mon PC, c'est à cause de la résolution de ton écran qui est plus élévée que la mienne.

Et tu ne pourras jamais rien y faire (je crois). Regarde j'ai une résolution de 1280 X 800, ton fond une résolution de 1280 X 1024 donc en ce qui me concerne ton image dépasse de mon écran chez moi. Mais j'ai pas de marges blanches avec ces nouveaux réglages (sauf une petite en bas). Ton écran doit avoir par exemple une résolution de 1600 x 1200, tu comprends tout de suite que ton image ne va pas s'étirer pour d'adapter à ton écran. Tu auras obligatoirement une marge blanche s'agissant d'une photo. Mais faut voir large en te disant que tes visiteurs sont tous différents, et n'auront pas le même résultat. Tu vois Gael49 te disait même de voir moins grand en 1024 X 768, je suis du même avis mais tu vas pas être d'accord :lol:

.

En image c'est plus parlant, j'ai pris l'hypothèse que tu as une résolution de 1600 X 1200 :

En haut ton écran, en bas le mien (les encadrés rouges).

Les fonds noirs représentent ton image.

Sinon, j'ai vu aussi sur ton site que tu as du changer d'avis, le nouveau CSS n'a pas été hébergé.

Si quelqu'un voit une autre solution pour les marges blanches, qu'il n'hésite pas.

Peut-être des % au lieu des px pour centrer sur toutes les résolutions...

Chipeur59 a écrit:Merci Skynet, merci pc-infopratique, les seuls à m avoir aidé sur 4 forums postés )

Merci c'est sympa

.

Bon surf à toi !

Chipeur59 · le 21 Mai 2010 08:26

Merci pour le jpeg, j ai remplacé le png et effectivement, pas de différence visible.

Aurais tu un lien ou un code pour m'expliquer comment je peux faire apparaitre une liste de [liens avec images] ou juste une image, au passage de la souris sur une zone mappée?

Exemple: quand on passe la souris sur "contact" je voudrais faire apparaitre les mots facebook, myspace etc avec leur icône respective devant,..., sur "wallpaper", faire apparaitre des photos miniatures cliquables qui seront dispo en téléchargement sur une autre page (donc cliquables et contenant un lien vers cette page)

je sais ca fait bcp :-?

mais si je sais comment faire ca, je pourrais déjà faire pas mal de choses intéressantes sur un site..

Skynet · le 21 Mai 2010 11:06

De rien, du coup la page s'affiche plus rapidement.

Tu as chargé ton CSS je vois ça, avec ta révision du margin-left. Mais l'image est décalée, j'ai une marge énorme à gauche et en bas. Tu sais ça rend peut-être bien sur ton écran mais c'est pas toi qui va visiter ton site

.

Si déjà pour moi l'image de fond est déplacée vers la droite, alors que je l'affiche sous mon portable avec un écran de 15,4", pour la majorité de tes visiteurs ça sera identique.

Je crois qu'il faudrait que tu charges ta page sur un autre PC pour te rendre compte.

Chipeur59 a écrit:Aurais tu un lien ou un code pour m'expliquer comment je peux faire apparaitre une liste de [liens avec images] ou juste une image, au passage de la souris sur une zone mappée?

Je regarderais mais ça ne sera pas pour tout de suite.

@++

Skynet · le 24 Mai 2010 18:27

Je suis de retour

.

Good ton CSS de nouveau

.

Sinon, tu as creusé de ce côté pour ton info bulle ? Avec ce css à adapter :

infobulles.css

Code: Tout sélectionner: a.info{ position:relative; z-index:24; background-color:#ccc; color:#000; text-decoration:none} a.info:hover{z-index:25; background-color:#ff0} a.info span{display: none} a.info:hover span{ /*le contenu de la balise span ne sera visible que pour l'état a:hover */ display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #6699cc; background-color:#eeeeee; color:#6699cc; text-align: justify; font-weight:none; padding:1px; }

Avec entre les balises <head> et </head> :
<link rel="stylesheet" type="text/css" media="screen" href="infobulles.css" />

Et pour afficher une info bulle :
<a class="info" onclick='return false' href="#">Terme<span>Texte infobulles</span></a>

Ce qui donnerait en l'adaptant un début comme <area class="info"........................

Y a du boulot

.

Chipeur59 · le 25 Mai 2010 18:01

Un grand MERCI, je me penche dessus des ce soir et je te tiens au courant...

Superposer un lecteur MP3 java à une image

Superposer un lecteur MP3 java à une image

Re: Superposer un lecteur MP3 java à une image

Re: Superposer un lecteur MP3 java à une image

Re: Superposer un lecteur MP3 java à une image

Re: Superposer un lecteur MP3 java à une image

Re: Superposer un lecteur MP3 java à une image

Re: Superposer un lecteur MP3 java à une image

Sujets similaires

Qui est en ligne