Agrandissement d'image au contact de la souris+son associé
Posté : 13 sept. 2010, 23:59
Bonjour,
Je le dis de suite... je ne suis pas programmeur et mon code doit comporter des erreurs!
Ce code a été généré automatiquement suite à l'utilisation d'outils "pré-programmés" sur un blog.
souvent, il y a des bugs, et les outils en question ne fonctionnent plus... il faut donc bidouiller directement et manuellement le code Html, ce que j'ai fait souvent, en me servant de mes quelques connaissances mais aussi de ma logique.
Je me permet donc de faire un copier coller de ce code en espérant que quelqu'un puisse le vérifier un peu (si ça ne prend pas trop de temps, sinon ce n'est pas grave car ce n'est pas là mon plus grand problème)
Mon véritable soucis, est que je voudrais faire certaines améliorations qui ne sont pas prévues sur le blog, et qu'il faut donc écrire.
Il me suffirait donc de comprendre la marche à suivre, et où insérer le code manquant, afin que je le généralise et que je le reproduise partout où il le faudra.
Le code en question concerne un article sur un site de peinture.
Il s'agit de "Concert-Expo", et donc chaque peinture est associée à une musique. (jouée en concert).
Pour cet article précisément, il s'agit des scènes d'enfants de Schumann, donc 13 tableaux d'une même oeuvre, avec 13 petits morceaux de musique associés.
J'ai jusque là fait en sorte que les images des tableaux (hébergés sur imageshack.uk) aient un lien quand on clique dessus pour qu'une vidéo associée (toujours hébergée sur imageshack) apparaisse.
L'idée est de rendre cet article encore plus interactif, en faisant en sorte qu'au contact de la souris d'une de ces 13 images, on entende un son associé (hébergé je ne sais pas où... il me faudrait des idées car imageshack ne permet pas l'hébergement de sons), mais aussi, que l'image elle même, (image miniature d'un tableau) s'agrandisse aussi au contact de la souris (et en même temps qu'on entend le son associé), avec tout le reste tout autour qui devienne grisé.
(Bien entendu le lien vers la vidéo en cliquant sur l'image reste conservé)
Ma question est donc :
- Où héberger du son ? pour pouvoir l'associer à une image.
- Et comment agrandir l'image au contact de la souris en grisant tout l'alentour, et en faisant en sorte que cette image s'agrandisse dans un espace VISIBLE de l'écran (c'est important, car parfois ça peut ne pas être le cas).
Je vous laisse mon code (si quelqu'un a le temps de le vérifier), mais aussi et surtout pour me dire quoi insérer, et où...
(pour un seul tableau, car pour les 12 autres, je pige vite et saurai m'en tirer je pense pour reproduire le processus
PS: l'adresse du site est http;//nathaliejourdan.artblog.fr (il s'agit du premier article)
PS2: Je ne sais pas faire de css j'en suis désolé... d'autant plus que je ne sais pas comment faire avec un site comme artblog.fr
PS3: S'il existait un logiciel (freewere) capable de m'aider à rédiger un article et où je pourrais récupérer le code de cet artciel pour le "copier/coller" sur artblog lors de la création d'un nouvel article (c'est possible d'avoir le code de l'article sur artblog), ce serait super... mais quel seraient ces freewere et quelles seraient les procédures?
Merci pour votre aide.
cosi-fan-tutte
Code de l'article en ligne :
Je le dis de suite... je ne suis pas programmeur et mon code doit comporter des erreurs!
Ce code a été généré automatiquement suite à l'utilisation d'outils "pré-programmés" sur un blog.
souvent, il y a des bugs, et les outils en question ne fonctionnent plus... il faut donc bidouiller directement et manuellement le code Html, ce que j'ai fait souvent, en me servant de mes quelques connaissances mais aussi de ma logique.
Je me permet donc de faire un copier coller de ce code en espérant que quelqu'un puisse le vérifier un peu (si ça ne prend pas trop de temps, sinon ce n'est pas grave car ce n'est pas là mon plus grand problème)
Mon véritable soucis, est que je voudrais faire certaines améliorations qui ne sont pas prévues sur le blog, et qu'il faut donc écrire.
Il me suffirait donc de comprendre la marche à suivre, et où insérer le code manquant, afin que je le généralise et que je le reproduise partout où il le faudra.
Le code en question concerne un article sur un site de peinture.
Il s'agit de "Concert-Expo", et donc chaque peinture est associée à une musique. (jouée en concert).
Pour cet article précisément, il s'agit des scènes d'enfants de Schumann, donc 13 tableaux d'une même oeuvre, avec 13 petits morceaux de musique associés.
J'ai jusque là fait en sorte que les images des tableaux (hébergés sur imageshack.uk) aient un lien quand on clique dessus pour qu'une vidéo associée (toujours hébergée sur imageshack) apparaisse.
L'idée est de rendre cet article encore plus interactif, en faisant en sorte qu'au contact de la souris d'une de ces 13 images, on entende un son associé (hébergé je ne sais pas où... il me faudrait des idées car imageshack ne permet pas l'hébergement de sons), mais aussi, que l'image elle même, (image miniature d'un tableau) s'agrandisse aussi au contact de la souris (et en même temps qu'on entend le son associé), avec tout le reste tout autour qui devienne grisé.
(Bien entendu le lien vers la vidéo en cliquant sur l'image reste conservé)
Ma question est donc :
- Où héberger du son ? pour pouvoir l'associer à une image.
- Et comment agrandir l'image au contact de la souris en grisant tout l'alentour, et en faisant en sorte que cette image s'agrandisse dans un espace VISIBLE de l'écran (c'est important, car parfois ça peut ne pas être le cas).
Je vous laisse mon code (si quelqu'un a le temps de le vérifier), mais aussi et surtout pour me dire quoi insérer, et où...
(pour un seul tableau, car pour les 12 autres, je pige vite et saurai m'en tirer je pense pour reproduire le processus
PS: l'adresse du site est http;//nathaliejourdan.artblog.fr (il s'agit du premier article)
PS2: Je ne sais pas faire de css j'en suis désolé... d'autant plus que je ne sais pas comment faire avec un site comme artblog.fr
PS3: S'il existait un logiciel (freewere) capable de m'aider à rédiger un article et où je pourrais récupérer le code de cet artciel pour le "copier/coller" sur artblog lors de la création d'un nouvel article (c'est possible d'avoir le code de l'article sur artblog), ce serait super... mais quel seraient ces freewere et quelles seraient les procédures?
Merci pour votre aide.
cosi-fan-tutte
Code de l'article en ligne :
Code : Tout sélectionner
<p><font color="#ffffff"> </font></p>
<p style="text-align: center;"><font color="#ffffff"><a title="Tennisman" href="http://nathaliejourdan.artblog.fr/470640/Tennisman/" target="_blank"><img title="Tennisman" onmouseover="this.src='http://img36.imageshack.us/img36/5705/atelier.th.jpg';" onmouseout="this.src='http://img685.imageshack.us/img685/682/tennisman.th.jpg';" src="http://img685.imageshack.us/img685/682/tennisman.th.jpg" alt="Tennisman" width="133" height="106" /></a> <a title="La Pin-Up" href="http://nathaliejourdan.artblog.fr/470643/La-Pin-Up/" target="_blank"><img title="Pin-Up" src="http://img97.imageshack.us/img97/3387/pinupu.th.jpg" alt="Pin-Up" width="140" height="106" /></a> <a title="Femme" href="http://nathaliejourdan.artblog.fr/21459/Femme/" target="_blank"><img title="Femme" src="http://img9.imageshack.us/img9/9347/femmec.th.jpg" alt="Femme" width="141" height="106" /></a></font></p>
<p style="text-align: center;"><font color="#ffffff"><a title="Si belle en ce miroir..." href="http://nathaliejourdan.artblog.fr/270673/Si-belle-en-ce-miroir/" target="_blank"><img title="Si belle en ce miroir..." src="http://img689.imageshack.us/img689/3213/sibelle.th.jpg" alt="Si belle en ce miroir..." width="99" height="150" /></a> <a title="La Contrebasse" href="http://nathaliejourdan.artblog.fr/270675/La-contrebasse/" target="_blank"><img title="La Contrebasse" src="http://img40.imageshack.us/img40/5392/lacontrebasse.th.jpg" alt="La Contrebasse" width="99" height="150" /></a> <a title="La ménagère" href="http://nathaliejourdan.artblog.fr/162114/La-menagere/" target="_blank"><img title="La ménagère" src="http://img140.imageshack.us/img140/2016/menagere.th.jpg" alt="La ménagère" width="98" height="150" /></a> <a title="L'autre monde" href="http://nathaliejourdan.artblog.fr/196867/L-autre-monde/" target="_blank"><img title="L'autre monde" src="http://img193.imageshack.us/img193/1387/autremonde.th.jpg" alt="L'autre monde" width="98" height="150" /></a></font></p>
<p style="text-align: justify;"><font color="#ffffff"> </font></p>
<table id="_mc_tmp" style="height: 468px; border-color: #000000; border-width: 0px; background-color: #000000; text-align: center;" border="0" width="490" summary="Scènes d'enfants de Schumann par Nathalie Jourdan">
<tbody>
<tr>
<th style="width: 196px; height: 156px; border: 1px solid #000000; background-color: #000000;" align="center" valign="middle">
<p style="text-align: center;"><font color="#ffffff"><strong><font size="4"><em>Robert
Schumann</em></font></strong></font></p>
<p style="text-align: center;"><font size="3" color="#ffffff"><em>Scènes d'enfants Op.15</em></font></p>
<p style="text-align: center;"><font size="3" color="#ffffff"><em>par <strong>Nathalie Jourdan</strong></em></font></p>
<p style="text-align: center;"><font size="2" color="#ff0000"><span style="text-decoration: underline;"><strong><a title="Schumann/Scène d'enfants/Concert-Expo/Salloum-Jourdan/1ère partie" href="http://img231.imageshack.us/img231/5158/scnesdenfants1r.mp4" target="_blank"><font color="#ff0000"><span style="background-color: #ffff00;">Concert-Expo (1ère
partie)</span></font></a> <a title="Schumann/Scène d'enfants/Concert-Expo/Salloum-Jourdan/2ème partie" href="http://img21.imageshack.us/img21/4724/scnesdenfants2m.mp4" target="_blank"><font color="#ff0000"><span style="background-color: #ffff00;">Concert-Expo (2ème
partie)</span></font></a> <a title=""Concert-Expo"/Jourdan-Salloum/Scènes d'enfants de Schumann" href="http://img811.imageshack.us/img811/3891/schumannkinderszenens.mp4" target="_blank"><font color="#ff0000"><span style="background-color: #ffff00;">
</span></font></a></strong></span></font></p>
<p style="text-align: center;"><em><font color="#ffffff"><font size="2">(Dominique Salloum au
piano)</font></font></em></p>
</th>
<td style="border: 1px solid #000000; background-color: #000000; text-align: center;"><a title="Schumann - Scène d'enfants n°1 - Gens et pays étrangers" href="http://img841.imageshack.us/img841/8121/1gensetpaystrang.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°1 - Gens et pays étrangers" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B01%20-%20Gens%20et%20pays%20%C3%A9trangers" src="http://a.imageshack.us/img21/859/agensetpaystrangers.jpg" alt="Schumann - Scène d'enfants n°1 - Gens et pays étrangers" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°2 - Curieuse histoire" href="http://img259.imageshack.us/img259/3608/2curieusehistoire.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°2 - Curieuse histoire" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B02%20-%20Curieuse%20histoire" src="http://a.imageshack.us/img405/8766/bcurieusehistoire.jpg" alt="Schumann - Scène d'enfants n°2 - Curieuse histoire" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°3 - Colin maillard" href="http://img833.imageshack.us/img833/3654/3colinmaillard.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°3 - Colin maillard" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B03%20-%20Colin%20maillard" src="http://a.imageshack.us/img818/2716/ccolinmaillard.jpg" alt="Schumann - Scène d'enfants n°3 - Colin maillard" width="98" height="156" /></a></td>
</tr>
<tr>
<td id="_mc_tmp" style="border: 1px solid #000000; background-color: #000000; height: 156px;" colspan="2"><a title="Schumann - Scène d'enfants n°4 - Désir d'enfant" href="http://img84.imageshack.us/img84/3875/4dsirdenfant.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°4 - Désir d'enfant" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B04%20-%20D%C3%A9sir%20d'enfant" src="http://a.imageshack.us/img830/6766/enfant.jpg" alt="Schumann - Scène d'enfants n°4 - Désir d'enfant" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°5 - Bonheur parfait" href="http://img268.imageshack.us/img268/302/5bonheurparfait.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°5 - Bonheur parfait" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B05%20-%20Bonheur%20parfait" src="http://a.imageshack.us/img26/56/ebonheurparfait.jpg" alt="Schumann - Scène d'enfants n°5 - Bonheur parfait" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°6 - Evènement important" href="http://img205.imageshack.us/img205/4170/6evnementimportant.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°6 - Evènement important" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B06%20-%20Ev%C3%A8nement%20important" src="http://a.imageshack.us/img821/8398/fevnementimportant.jpg" alt="Schumann - Scène d'enfants n°6 - Evènement important" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°7 - Rêverie" href="http://img713.imageshack.us/img713/9782/7rverie.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°7 - Rêverie" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B07%20-%20R%C3%AAverie" src="http://a.imageshack.us/img808/8311/grverie.jpg" alt="Schumann - Scène d'enfants n°7 - Rêverie" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°8 - Au coin du feu" href="http://img820.imageshack.us/img820/2995/8aucoindufeu.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°8 - Au coin du feu" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B08%20-%20Au%20coin%20du%20feu" src="http://a.imageshack.us/img696/8858/haucoindufeu.jpg" alt="Schumann - Scène d'enfants n°8 - Au coin du feu" width="98" height="156" /></a></td>
</tr>
<tr>
<td id="_mc_tmp" style="height: 156px; border: 1px solid #000000; background-color: #000000;" colspan="2"><a title="Schumann - Scène d'enfants n°9 - Cavalier sur cheval de bois" href="http://img801.imageshack.us/img801/1305/9cavaliersurcheval.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°9 - Cavalier sur cheval de bois" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B09%20-%20Cavalier%20sur%20cheval%20de%20bois" src="http://a.imageshack.us/img811/278/icavaliersurchevaldeboi.jpg" alt="Schumann - Scène d'enfants n°9 - Cavalier sur cheval de bois" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°10 - Presque trop sérieux" href="http://img534.imageshack.us/img534/8009/10presquetropsrie.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°10 - Presque trop sérieux" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B010%20-%20Presque%20trop%20s%C3%A9rieux" src="http://a.imageshack.us/img189/5552/jpresquetropsrieux.jpg" alt="Schumann - Scène d'enfants n°10 - Presque trop sérieux" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°11 - Le croquemitaine" href="http://img693.imageshack.us/img693/280/11lecroquemitaine.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°11 - Le croquemitaine" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B011%20-%20Le%20croquemitaine" src="http://a.imageshack.us/img690/7404/klecroquemitaine.jpg" alt="Schumann - Scène d'enfants n°11 - Le croquemitaine" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°12 - L'enfant s'endort" href="http://img821.imageshack.us/img821/1556/12lenfantsendort.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°12 - L'enfant s'endort" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B012%20-%20L'enfant%20s'endort" src="http://a.imageshack.us/img529/4314/endort.jpg" alt="Schumann - Scène d'enfants n°12 - L'enfant s'endort" width="98" height="156" /></a><a title="Schumann - Scène d'enfants n°13 - Le poète parle" href="http://img840.imageshack.us/img840/7499/13lepoteparle.mp4" target="_blank"><img title="Schumann - Scène d'enfants n°13 - Le poète parle" longdesc="Schumann%20-%20Sc%C3%A8ne%20d'enfants%20n%C2%B013%20-%20Le%20po%C3%A8te%20parle" src="http://a.imageshack.us/img230/2032/mlepoteparle.jpg" alt="Schumann - Scène d'enfants n°13 - Le poète parle" width="98" height="156" /></a></td>
</tr>
</tbody>
</table>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;"><a><font face="comic sans ms" size="2" color="#888888"><font>Nathalie Jourdan est une peintre
contemporaine qui émeut autant par la profondeur de ses peintures à
l'huile que par le regard incisif de ses
pastels.</font></font></a></p>
<p style="text-align: justify;"><font face="comic sans ms" size="2" color="#888888">Côtée chez Drouot, Nathalie Jourdan apparait dans
le dictionnaire Larousse des "Cotation des artistes du XVème siècle
à nos jours", ainsi que dans le dictionnaire "Contemporary Artists"
qui parait aux éditions WWAB aux USA.</font></p>
<p style="text-align: justify;"><font face="comic sans ms" size="2" color="#888888">Avec son mari Dominique Salloum (<a title="Dominique Salloum - pianiste et compositeur" href="http://dominiquesalloum.musicblog.fr/" target="_blank">http://dominiquesalloum.musicblog.fr/</a>), Nathalie
Jourdan donne des "Concerts-Expo", où des tableaux faits sur
mesure, selon le programme interprété par son mari au piano, sont
projetés durant le concert sur un écran géant.</font></p>
<p style="text-align: justify;"><font face="comic sans ms" size="2" color="#888888">L'idée est novatrice et ludique. Elle plait tant au
public qu'aux critiques. En 2010, et pour l'année Chopin -
Schumann, des programmes divers sont donnés un peu partout, avec de
Chopin les Impromptus et les Ballades, et de Schumann les Scènes
d'enfants, le Carnaval de Vienne, et les Kreisleriana.</font></p>
<p style="text-align: justify;"><font face="comic sans ms" size="2" color="#888888">De nombreux Concerts-Expo sont prévus pour l'année
prochaine, (année Franz Liszt), avec les Consolations, les années
de pélerinage, la sonate en si mineur ainsi que le deuxième
concerto de Liszt.</font></p>
<p style="text-align: right;"><font face="comic sans ms" size="2" color="#888888"><a><font>Cotation Drouot:</font></a> <a title="Nathalie Jourdan - Cotation Drouot" href="http://www.drouot-cotation.org/accueil/index.php?Mode=0&id=6922" target="_blank"><font>www.drouot-cotation.org</font></a></font></p>
<p style="text-align: right;"><font face="comic sans ms" size="2" color="#888888">Des e-cards de Nathalie Jourdan sont disponibles
sur le lien suivant : <a title="Nathalie Jourdan (cartes postales)" href="http://www.e-cards.com/catalog/cat-selection.pl?artist=Nathalie%20Jourdan" target="_blank"><font><font>(http://www.e-cards.com</font></font></a></font><a title="Nathalie Jourdan (cartes postales)" href="http://www.e-cards.com/catalog/cat-selection.pl?artist=Nathalie%20Jourdan" target="_blank"><font face="comic sans ms" size="2" color="#888888"><font><font>)</font></font></font></a></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><a title="Articles de presse" href="http://nathaliejourdan.artblog.fr/500186/Presse/" target="_blank"><font color="#ffffff"><font size="6"><span style="background-color: #ffcc00;">Presse</span></font></font></a></p>
<p style="text-align: justify;"><font color="#ffffff"> </font></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><font color="#ffffff"><em><a href="mailto:[email protected]"><font face="book antiqua,palatino" size="5">e-m@il Nathalie Jourdan</font></a></em></font></p>
<p style="text-align: center;"><font color="#ffffff"> </font></p>
<p style="text-align: center;"><font color="#ffffff"> </font></p>