Il y a actuellement 61 visiteurs
Mercredi 28 Juillet 2021
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Superposer un lecteur MP3 java à une image

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

Superposer un lecteur MP3 java à une image

Message 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
Chipeur59
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 24
Inscription: 12 Jan 2008 20:15
 


Re: Superposer un lecteur MP3 java à une image

Message 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...
“It has to start somewhere, it has to start sometime, what better place than here, what better time than now?”
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1932
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 

Message 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.
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Re: Superposer un lecteur MP3 java à une image

Message 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?
Chipeur59
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 24
Inscription: 12 Jan 2008 20:15
 

Message 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>&#9409;&#9679;&#9424; ·&#8226;&#9679;oO Official Website Oo&#9679;&#8226;· 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&amp;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&amp;v3=1&amp;related=1">
    <param name="movie" value="http://www.dailymotion.com/swf/video/x4wapu&amp;v3=1&amp;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.
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Re: Superposer un lecteur MP3 java à une image

Message 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;
}
Chipeur59
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 24
Inscription: 12 Jan 2008 20:15
 

Message 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;
     }
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Re: Superposer un lecteur MP3 java à une image

Message 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 :))
Chipeur59
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 24
Inscription: 12 Jan 2008 20:15
 

Message 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 :

Image

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 !
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Re: Superposer un lecteur MP3 java à une image

Message 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..
Chipeur59
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 24
Inscription: 12 Jan 2008 20:15
 

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

@++
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Message 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 ;).
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Re: Superposer un lecteur MP3 java à une image

Message le 25 Mai 2010 18:01

Un grand MERCI, je me penche dessus des ce soir et je te tiens au courant...
Chipeur59
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 24
Inscription: 12 Jan 2008 20:15
 



Sujets similaires

Message [Réglé]Connexion lecteur reseau au demarrage windows
Bonjour,J'ai la version 4.2.9 pour "Freebox OS"Suite à la mise à jour récente de Windows10, il est possible que la case "Se reconnecter lors de la connexion" située dans la fenêtre "Connecter un lecteur réseau" ait été décochée. A vérifier qu'elle soit bien cochée.Vérif ...
Réponses: 7

Message lecteur windows média
Bonjour,Je ne peu pas lire une le contenu d'une clé USB car j'ai ce message:Le lecteur Windows media ne peu pas lire le fichier parce que le codec vidéo requis n'est pas installé sur votre ordinateur.Que faire ?Cdt
Réponses: 21

Message Problème ouverture lecteur Blue-Ray
Bonjour,Tout d'abord je tiens à m'excuser si je ne suis pas dans la bonne catégorie du forum ou même de si ce type de sujet est valable sur ce forum j'ai pensé que "périphériques externes" correspondait le mieux.Pour faire court : Depuis 4 ans j'ai chez moi un Home cinéma Phillips modèle H ...
Réponses: 1

Message Police depuis une image- Résolu
Bonjour à tousEst ce que quelqu'un connait un outil qui puisse récupérer une police d'écriture depuis une image.J'ai essayer pas mal d'outils proposé sur le net et pas de conclusion hélas.https://fr-fr.facebook.com/1877469812465742/photos/1877477345798322/Je dois récupérer ces deux écritures pour un ...
Réponses: 0

Message Micro freeze image + son en jeu et sur windows.
Bonjour,Je viens vers vous car je ne sais pas quoi faire, j'ai absolument essayé de faire le maximum pour régler mon problème.En effet j'ai des micros freeze en jeu et sur windows (micro freeze son aussi) En faite j'ai ça quand j'ai des chutes de fps en jeu (par exemple j'ai une chute de 10-15 fps s ...
Réponses: 8

Message Lecteur dvd/bluray
Bonjour, j'ai un Asus Vivobook qui est petit et n'a donc pas de lecteur dvd directement dessus. Je cherche donc à savoir s'il existe des lecteurs qu'on peut venir brancher à l'ordi pour lire un dvd ? Je sais qu'Apple fait ça pour ses macbook, mais je n'ai pas réussi à trouver pour d'autres marques.. ...
Réponses: 2

Message Responsive : Changer la position de l'image de fond
Bonjour, sur un site que je développe, j'ai une image de fond qui est située au centre lorsque le site s'affiche sur un écran d'ordinateur. Seulement, pour le moment, en affichage mobile, l'image ne bouge pas et du texte vient la recouvrir (ce qui cache l'image et rend le texte illisible). J'aimerai ...
Réponses: 0


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


.: Nous contacter :: Flux RSS :: Données personnelles :.