script acceuil et atelier cree
This commit is contained in:
hugodu69
@@ -14,7 +14,7 @@
|
||||
<script type="text/javascript" src="javascript/jsScrollbar.js"></script>
|
||||
<script type="text/javascript" src="javascript/jsScroller.js"></script>
|
||||
|
||||
<script type="text/javascript"><!--
|
||||
<script type="text/javascript">
|
||||
var scroller = null;
|
||||
var scrollbar = null;
|
||||
|
||||
@@ -58,24 +58,9 @@ function swapIt(o) {
|
||||
|
||||
return false;
|
||||
}
|
||||
--></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function preload() {
|
||||
if (document.images) {
|
||||
tabImages=new Array;
|
||||
for (var i=0; i<preload.arguments.length; i++){
|
||||
tabImages[i]=new Image();
|
||||
tabImages[i].src=preload.arguments[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var tabImages=new Array;
|
||||
preload("images/logo_bloc_house.png", "images/fond1.png", "images/iconePDF.png", "images/mail.png");
|
||||
//-->
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
|
||||
@@ -165,7 +165,7 @@ margin-left:240px;
|
||||
|
||||
/* page accueil */
|
||||
|
||||
#content{
|
||||
#accueil{
|
||||
float:left;
|
||||
width:480px;
|
||||
height:600px;
|
||||
|
||||
73
index.html
73
index.html
@@ -1,50 +1,12 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<!DOCTYPE html">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Association Bloc-House - Les ateliers éphémères</title>
|
||||
<meta name="description" content="Site présentant les activités de l'association Bloc-House à Sceaux" />
|
||||
<meta name="Author" content="L'association Bloc-House - pole de création à Sceaux" />
|
||||
<meta name="keywords" content="Bloc-House,
|
||||
ateliers éphémères,
|
||||
ville de Sceaux,
|
||||
ateliers portes ouvertes,
|
||||
association d'artistes plasticiens,
|
||||
diffusion de la création contemporaine,
|
||||
ouverture d'ateliers éphémères,
|
||||
territoire,
|
||||
pôle de création,
|
||||
interface,
|
||||
partenaires culturels,
|
||||
économiques et sociaux,
|
||||
manifestations artistiques,
|
||||
Underground,
|
||||
Milan Atanaskovic,
|
||||
Eliza Magri,
|
||||
Macha Pandellé,
|
||||
Vincent Pandellé,
|
||||
Altone Mishino,
|
||||
Jérome Bouchez,
|
||||
Paule Millara,
|
||||
Christophe Bogdan,
|
||||
Margot Montenoise,
|
||||
Lahouari Mansouri dit Wari,
|
||||
esapce de travail alternatif,
|
||||
Mitou Alalinarde,
|
||||
Claire Artemyz,
|
||||
Jean José Baranes,
|
||||
Gérard Koch,
|
||||
Nicolas de Ferran,
|
||||
Macha Krivokapic,
|
||||
Anne Mauban,
|
||||
Isabelle Rince,
|
||||
Claudine Sabatier,
|
||||
Dashan Yang,
|
||||
installation éphémères,
|
||||
manifestation NOIR,
|
||||
manifestation TO BE A STICKER,
|
||||
manifestation CECI N'EST PAS UN KAKEMONO,
|
||||
manifestation CO-INCIDENCES" />
|
||||
<meta name="keywords" content="Bloc-House, ateliers éphémères, ville de Sceaux, ateliers portes ouvertes, association d'artistes plasticiens, diffusion de la création contemporaine, ouverture d'ateliers éphémères, territoire, pôle de création, interface, partenaires culturels, économiques et sociaux, manifestations artistiques, Underground, Milan Atanaskovic, Eliza Magri, Macha Pandellé, Vincent Pandellé, Altone Mishino, Jérome Bouchez, Paule Millara, Christophe Bogdan, Margot Montenoise, Lahouari Mansouri dit Wari, esapce de travail alternatif, Mitou Alalinarde, Claire Artemyz, Jean José Baranes, Gérard Koch, Nicolas de Ferran, Macha Krivokapic, Anne Mauban, Isabelle Rince, Claudine Sabatier, Dashan Yang, installation éphémères, manifestation NOIR, manifestation TO BE A STICKER, manifestation CECI N'EST PAS UN KAKEMONO, manifestation CO-INCIDENCES " />
|
||||
<link rel="shortcut icon" href="images/iconw.png"/>
|
||||
<link rel="stylesheet" media="screen" type="text/css" href="css/styles.css" title="Design" />
|
||||
<script type="text/javascript">
|
||||
@@ -61,7 +23,8 @@
|
||||
})();
|
||||
</script>
|
||||
<meta name="google-site-verification" content="t6t1zeNahIOuUSEJ0MNrnSx4qDJvDBgSkBq-PWUFBls" />
|
||||
<script type="text/javascript" src="javascript/content.js" defer></script>
|
||||
<script type="text/javascript" src="javascript/insert.js" defer></script>
|
||||
<script id="pageScript" type="text/javascript" src="javascript/page_accueil.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -75,19 +38,19 @@
|
||||
<img src="images/logo_bloc_house.png" alt="Logo Bloc-House" width="223" height="47" />
|
||||
</div>
|
||||
<div class="trait"></div>
|
||||
<div class="menu menu_clic">ACCUEIL</div>
|
||||
<div class="menu menu_clic" id="page_accueil">ACCUEIL</div>
|
||||
<div class="trait1"></div>
|
||||
<div class="menu">ATELIERS</div>
|
||||
<div class="menu" id="page_ateliers">ATELIERS</div>
|
||||
<div class="trait1"></div>
|
||||
<div class="menu">MANIFESTATIONS</div>
|
||||
<div class="menu" id="page_manifestations">MANIFESTATIONS</div>
|
||||
<div class="trait1"></div>
|
||||
<div class="menu">ARTISTES</div>
|
||||
<div class="menu" id="page_artistes">ARTISTES</div>
|
||||
<div class="trait1"></div>
|
||||
<div class="menu">INTERSTICES</div>
|
||||
<div class="menu" id="page_interstices">INTERSTICES</div>
|
||||
<div class="trait1"></div>
|
||||
<div class="menu">CONTACT - INFOS</div>
|
||||
<div class="menu" id="page_contact">CONTACT - INFOS</div>
|
||||
<div class="trait1"></div>
|
||||
<div class="menu">PARTENAIRES</div>
|
||||
<div class="menu" id="page_partenaires">PARTENAIRES</div>
|
||||
<div class="left_bottom1" style="margin-top:25px;">
|
||||
<img class="icone" style="margin-left:5px;" src="images/iconePDF.png" alt="icone adobe reader" width="36" height="36" />
|
||||
<div class="sousmenu" style="margin-top:5px;">
|
||||
@@ -109,12 +72,8 @@
|
||||
<div id="right">
|
||||
|
||||
<!-- ~~~~~~~~~~~ CONTENT ~~~~~~~~~~~ -->
|
||||
<div id="content">
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
|
||||
<script type="text/javascript" src="javascript/jquery.diaporama.js"></script>
|
||||
<script type="text/javascript" src="javascript/script.js"></script>
|
||||
<div class="content" id="accueil"></div>
|
||||
<div id="js"></div>
|
||||
<!-- ~~~~~~~~~~~ FIN CONTENT ~~~~~~~~~~~ -->
|
||||
|
||||
<div id="trait_vertical"></div>
|
||||
|
||||
27
javascript/insert.js
Normal file
27
javascript/insert.js
Normal file
@@ -0,0 +1,27 @@
|
||||
var page = document.getElementsByClassName("menu");
|
||||
|
||||
function clickAction() {
|
||||
for (var i = 0; i < page.length; i++) {
|
||||
page[i].addEventListener("click", insert);
|
||||
}
|
||||
}
|
||||
|
||||
function insert(e) {
|
||||
var pageName = e.target.id;
|
||||
Object.values(page).forEach(e => e.className = "menu");
|
||||
e.target.className = "menu menu_clic";
|
||||
/*next lines changes the script that load different
|
||||
contents for different pages*/
|
||||
//first remove the old one
|
||||
var script = document.getElementById("pageScript");
|
||||
script.parentElement.removeChild(script);
|
||||
//then create the new one
|
||||
var scriptAdd = document.createElement('script');
|
||||
scriptAdd.type = 'text/javascript';
|
||||
scriptAdd.id = "pageScript";
|
||||
scriptAdd.defer = true;
|
||||
scriptAdd.src = 'javascript/' + pageName + '.js';
|
||||
document.head.appendChild(scriptAdd);
|
||||
}
|
||||
|
||||
clickAction();
|
||||
3
javascript/jquery-1.3.2.min.js
vendored
3
javascript/jquery-1.3.2.min.js
vendored
File diff suppressed because one or more lines are too long
49
javascript/jsScrollOnload.js
Normal file
49
javascript/jsScrollOnload.js
Normal file
@@ -0,0 +1,49 @@
|
||||
var diapo =
|
||||
`
|
||||
var scroller = null;
|
||||
var scrollbar = null;
|
||||
|
||||
window.onload = function () {
|
||||
scroller = new jsScroller(document.getElementById("News"), 480, 530);
|
||||
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
|
||||
}
|
||||
function scrollbarEvent (o, type) {
|
||||
if (type == "mousedown") {
|
||||
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#E3E3E3";
|
||||
else o.style.backgroundColor = "##CC3300";
|
||||
} else {
|
||||
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#EEE";
|
||||
else o.style.backgroundColor = "#CC3300";
|
||||
}
|
||||
}
|
||||
function swapIt(o) {
|
||||
o.blur();
|
||||
if (o.className == "current") return false;
|
||||
|
||||
var list = document.getElementById("Navigation").getElementsByTagName("a");
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
if (list[i].className == "current") {
|
||||
list[i].className = "";
|
||||
document.getElementById(list[i].title).y = -scroller._y;
|
||||
}
|
||||
if (list[i].title == o.title) o.className = "current";
|
||||
}
|
||||
|
||||
list = document.getElementById("Container").childNodes;
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
if (list[i].tagName == "DIV") list[i].style.display = "none";
|
||||
}
|
||||
|
||||
var top = document.getElementById(o.title);
|
||||
top.style.display = "block";
|
||||
scrollbar.swapContent(top);
|
||||
if (top.y) scrollbar.scrollTo(0, top.y);
|
||||
|
||||
return false;
|
||||
}
|
||||
`;
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.text = diapo;
|
||||
document.head.appendChild(script);
|
||||
@@ -1,6 +1,15 @@
|
||||
var content = document.getElementById("content");
|
||||
var accueil =
|
||||
`
|
||||
var content = document.getElementsByClassName("content")[0];
|
||||
var js = document.getElementById("js");
|
||||
|
||||
//transform a multiline comment into a string
|
||||
function multiline(f) {
|
||||
return f.toString().
|
||||
replace(/^[^\/]+\/\*!?/, '').
|
||||
replace(/\*\/[^\/]+$/, '');
|
||||
}
|
||||
|
||||
//mutliline comment containing html to place in the dom
|
||||
var accueil = multiline(function() {/*!
|
||||
<!-- animation page d'accueil -->
|
||||
<ul class="diaporama">
|
||||
<li><a href="ateliers.php" title="Accéder à ATELIERS"><img alt="image 1 diaporama" src="images/accueil/pageAccueil1.jpg" /></a></li>
|
||||
@@ -23,6 +32,23 @@ var accueil =
|
||||
Bloc-House produit chaque année des manifestations artistiques qui sont autant de possibilités d'échange, de liens tissés avec le grand public et le milieu des collectionneurs.
|
||||
</div>
|
||||
<!-- fin text -->
|
||||
`;
|
||||
*/});
|
||||
|
||||
content.innerHTML = accueil;
|
||||
js.innerHTML = "";
|
||||
|
||||
var script1 = document.createElement('script');
|
||||
script1.type = 'text/javascript';
|
||||
script1.async = false;
|
||||
script1.src = 'javascript/jquery-1.3.2.min.js';
|
||||
var script2 = document.createElement('script');
|
||||
script2.type = 'text/javascript';
|
||||
script2.async = false;
|
||||
script2.src = 'javascript/jquery.diaporama.js';
|
||||
var script3 = document.createElement('script');
|
||||
script3.type = 'text/javascript';
|
||||
script3.async = false;
|
||||
script3.src = 'javascript/script.js';
|
||||
js.appendChild(script1);
|
||||
js.appendChild(script2);
|
||||
js.appendChild(script3);
|
||||
67
javascript/page_ateliers.js
Normal file
67
javascript/page_ateliers.js
Normal file
@@ -0,0 +1,67 @@
|
||||
var content = document.getElementById("ateliers");
|
||||
var js = document.getElementById("js");
|
||||
var ateliers =
|
||||
`
|
||||
<div id="Container">
|
||||
<div id="News">
|
||||
<div class="Scroller-Container">
|
||||
|
||||
<div id="img_atelier"><img src="images/ateliers/ateliers1.jpg" style="margin-top:25px;" alt="Le site des ateliers Bloc-House" width="480" height="283" /></div>
|
||||
<div class="legende">Site des ateliers Bloc-House</div>
|
||||
|
||||
<!-- ici la liste des artistes résidents, pour ajouter ou échanger un artiste, mettre "- nom de l'artiste" à l'endroit souhaité-->
|
||||
<div class="artistes">
|
||||
<p style="font-size:14px;font-weight:bold;">Les artistes résidents</p>
|
||||
<p style="margin-top:2px;">Underground <span style="margin-left:5px;">Milan Atanaskovic</span></p>
|
||||
<p style="margin-top:2px;">First level <span style="margin-left:23px;">Eliza Magri - Macha Pandellé - Vincent Pandellé</span></p>
|
||||
<p style="margin-top:2px;">Second level <span style="margin-left:7px;">Altone Mishino - Jérome Bouchez - Paule Millara</span></p>
|
||||
<p style="margin-top:2px;">Third level <span style="margin-left:19px;">Christophe Bogdan - Margot Montenoise - Lahouari Mansouri dit Wari</span></p>
|
||||
</div><!-- fin de la liste des artistes -->
|
||||
<!-- les images -->
|
||||
<div id="carton"><img src="images/ateliers/ateliers2.jpg" style="margin-left:5px;margin-top:25px;" alt="carton invitation 1" width="228" height="320" /><img src="images/ateliers/ateliers3.jpg" style="margin-left:5px;margin-top:25px;" alt="carton invitation 1" width="238" height="320" /></div>
|
||||
<!-- fin des images -->
|
||||
|
||||
<!-- pour ajouter un carton d'invitation, calculer l'image à une hauteur de 320px, la nommer par exemple "ateliers4.jpg" et la glisser dans le dossier images/ateliers/, ensuite ajouter dans le code ci dessus
|
||||
<div id="carton"><img src="images/ateliers/ateliers4.jpg" style="margin-left:5px;margin-top:25px;" alt="carton invitation 3" width="" height="320" /></div> -->
|
||||
<div id="texte" style="margin-top:18px;font-size:12px;">
|
||||
<p>Chaque année, Bloc-House organise deux portes ouvertes : en octobre, dans le cadre des ateliers portes ouvertes, en partenariat avec la ville de Sceaux; en juin des ateliers portes ouvertes directement proposés par les artistes résidents Bloc-House.</p>
|
||||
<p style="width:100px;height:1px;border-bottom:1px solid #cc3300;margin-left:190px;margin-top:25px;"></p>
|
||||
<p style="margin-top:25px;font-style:italic;">"... l'Etat, en lien avec les collectivités territoriales, pourrait faciliter l'implantation de collectifs d'artistes dans des lieux dits "intercalaires", c'est à dire des bâtiments en attente d'affectation ou de travaux, sur un temps donné, clairement défini dans une convention d'occupation précaire - précaire car temporaire."</p>
|
||||
<p style="margin-top:10px;font-style:italic;">" Ces espaces de travail alternatifs... - même éphémères - ont un impact extrêmement positif sur la vie d'un quartier, son animation et son dynamisme. Il s'agit là d'une autre manière d'accéder à l'art, ni sacrée comme dans les musées, ni marchande comme dans les galeries. C'est un atout considérable, une chance pour les habitants, une opportunité pour les artistes."</p>
|
||||
<p style="margin-top:10px;font-weight:bold;">Christophe Girard</p>
|
||||
<p>Le petit livre rouge de la culture - Propositions pour une république culturelle</p>
|
||||
<p>Flammarion, 2012.</p>
|
||||
<p style="margin-top:20px;margin-bottom:10px;font-weight:bold;">Le site des ateliers a fait l'objet d'une convention de mise à disposition éphémère entre la ville de Sceaux et l'association Bloc-House</p>
|
||||
</div>
|
||||
</div><!-- fin scroller container -->
|
||||
</div><!-- fin news -->
|
||||
</div><!-- fin container -->
|
||||
|
||||
<div id="Scrollbar-Container">
|
||||
<div class="Scrollbar-Up"></div>
|
||||
<div class="Scrollbar-Down"></div>
|
||||
<div class="Scrollbar-Track">
|
||||
<div class="Scrollbar-Handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
content.innerHTML = ateliers;
|
||||
|
||||
|
||||
|
||||
var script1 = document.createElement('script');
|
||||
script1.type = 'text/javascript';
|
||||
script1.async = false;
|
||||
script1.src = 'javascript/jsScrollbar.js';
|
||||
var script2 = document.createElement('script');
|
||||
script2.type = 'text/javascript';
|
||||
script2.async = false;
|
||||
script2.src = 'javascript/jsScroller.js';
|
||||
var script3 = document.createElement('script');
|
||||
script3.type = 'text/javascript';
|
||||
script3.async = false;
|
||||
script3.src = 'javascript/jsScrollOnload.js';
|
||||
js.appendChild(script1);
|
||||
js.appendChild(script2);
|
||||
js.appendChild(script3);
|
||||
Reference in New Issue
Block a user