bonjour,
Je suis en train de créer mon site et je suis débutante. J'ai réussi à créer mon index.htm, css.htm et text.js. le carroussel fonction bien mais je le voudrais en vertical ainsi que la barre de défilement. Je n'y arrive pas. Pouvez vous m'aider? Voici mon code html
<html><head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css">
<link rel="stylesheet" href="index.css" type="text/css" media="screen"><title></title>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="text.js"></script>
<div id="imageflow">
<div id="loading"> <b>Loading images</b><br>
<img src="" alt="loading" height="13" width="350"> </div>
<div id="images">
<img src="images/1re_page/icone_maurice_reunion.gif" longdesc="maurice_reunion.htm" alt="Maurice Réunion">
<img src="images/1re_page/icone_mer_rouge.gif" longdesc="mer_rouge.htm" alt="Mer Rouge">
<img src="images/1re_page/icone_thailande.gif" longdesc="thailande.htm" alt="Thailande">
<img src="images/1re_page/icone_new_york.gif" longdesc="new_york.htm" alt="New York">
<img src="images/1re_page/icone_corse.gif" longdesc="corse.htm" alt="Corse">
<img src="images/1re_page/icone_seychelles.gif" longdesc="seychelles.htm" alt="Seychelles">
<img src="images/1re_page/icone_quebec.gif" longdesc="quebec.htm" alt="Québec">
<img src="images/1re_page/icone_guyane.gif" longdesc="guyane.htm" alt="Guyane">
</div>
<div id="captions"></div>
<div id="scrollbar">
<div id="slider"></div>
</div>
</div>
</body></html>
et mon code css
body
{
background:url(images/1re_page/1re_page.jpg) no-repeat fixed center;
background-color:rgb(0, 171, 175);
font-family: gabrielle;
font-size: 20pt;
color:rgb(120,245,248);
text-align:center;
margin:0px;
padding:5px;
}
img {
position:absolute;
top:0px;
border:none;
}
h1 {
text-align:center;
}
a
{
color:rgb(120,245,248);
}
clear
{
clear:both;
}
#images{
visibility:hidden;
}
#loading{
margin-top:50px;
text-align:center;
width:100%;
}
#loading img{
margin-top:10px;
position:relative;
}
#captions{
position:relative;
text-align:center;
z-index:10000;
}
#scrollbar{
visibility:hidden;
position:relative;
border-bottom:1px solid;
color:rgb(120,245,248);
z-index: 10001;
}
#slider{
position:absolute;
margin-top:-7px;
margin-left:-7px;
z-index:10002;
background-image:url(images/icone_rond.gif);
background-repeat:no-repeat;
width:14px;
height:14px;
}
#imageflow{
margin-left:350px;
text-align:left;
}
#changelog{
width:349px;
border-right:solid 1px #666;
float:left;
margin-top: 15px;
}
#changelog div{
text-align: justify;
padding: 0 15px 5px 15px;
}
et mon code.js
/* Configuration variables */
var conf_reflection_p = 0.5; // Sets the height of the reflection in % of the source image
var conf_focus = 4; // Sets the numbers of images on each side of the focussed one
var conf_slider_width = 14; // Sets the px width of the slider div
var conf_images_cursor = 'pointer'; // Sets the cursor type for all images default is 'default'
var conf_slider_cursor = 'default'; // Sets the slider cursor type: try "e-resize" default is 'default'
/* Id names used in the HTML */
var conf_imageflow = 'imageflow'; // Default is 'imageflow'
var conf_loading = 'loading'; // Default is 'loading'
var conf_images = 'images'; // Default is 'images'
var conf_captions = 'captions'; // Default is 'captions'
var conf_scrollbar = 'scrollbar'; // Default is 'scrollbar'
var conf_slider = 'slider'; // Default is 'slider'
/* Define global variables */
var caption_id = 0;
var new_caption_id = 0;
var current = 0;
var target = 0;
var mem_target = 0;
var timer = 0;
var array_images = new Array();
var new_slider_pos = 0;
var dragging = false;
var dragobject = null;
var dragx = 0;
var posx = 0;
var new_posx = 0;
var xstep = 150;
function step()
{
switch (target < current-1 || target > current+1)
{
case true:
moveTo(current + (target-current)/3);
window.setTimeout(step, 50);
timer = 1;
break;
default:
timer = 0;
break;
}
}
function glideTo(x, new_caption_id)
{
/* Animate gliding to new x position */
target = x;
mem_target = x;
if (timer == 0)
{
window.setTimeout(step, 50);
timer = 1;
}
/* Display new caption */
caption_id = new_caption_id;
caption = img_div.childNodes.item(array_images[caption_id]).getAttribute('alt');
if (caption == '') caption = ' ';
caption_div.innerHTML = caption;
/* Set scrollbar slider to new position */
if (dragging == false)
{
new_slider_pos = (scrollbar_width * (-(x*100/((max-1)*xstep))) / 100) - new_posx;
slider_div.style.marginLeft = (new_slider_pos - conf_slider_width) + 'px';
}
}
function moveTo(x)
{
current = x;
var zIndex = max;
/* Main loop */
for (var index = 0; index < max; index++)
{
var image = img_div.childNodes.item(array_images[index]);
var current_image = index * -xstep;
/* Don't display images that are not conf_focussed */
if ((current_image+max_conf_focus) < mem_target || (current_image-max_conf_focus) > mem_target)
{
image.style.visibility = 'hidden';
image.style.display = 'none';
}
else
{
var z = Math.sqrt(10000 + x * x) + 100;
var xs = x / z * size + size;
/* Still hide images until they are processed, but set display style to block */
image.style.display = 'block';
/* Process new image height and image width */
var new_img_h = (image.h / image.w * image.pc) / z * size;
switch ( new_img_h > max_height )
{
case false:
var new_img_w = image.pc / z * size;
break;
default:
new_img_h = max_height;
var new_img_w = image.w * new_img_h / image.h;
break;
}
var new_img_top = (images_width * 0.34 - new_img_h) + images_top + ((new_img_h / (conf_reflection_p + 1)) * conf_reflection_p);
/* Set new image properties */
image.style.left = xs - (image.pc / 2) / z * size + images_left + 'px';
if(new_img_w && new_img_h)
{
image.style.height = new_img_h + 'px';
image.style.width = new_img_w + 'px';
image.style.top = new_img_top + 'px';
}
image.style.visibility = 'visible';
/* Set image layer through zIndex */
switch ( x < 0 )
{
case true:
zIndex++;
break;
default:
zIndex = zIndex - 1;
break;
}
/* Change zIndex and onclick function of the focussed image */
switch ( image.i == caption_id )
{
case false:
image.onclick = function() { glideTo(this.x_pos, this.i); }
break;
default:
zIndex = zIndex + 1;
image.onclick = function() { document.location = this.url; }
break;
}
image.style.zIndex = zIndex;
}
x += xstep;
}
}
/* Main function */
function refresh(onload)
{
/* Cache document objects in global variables */
imageflow_div = document.getElementById(conf_imageflow);
img_div = document.getElementById(conf_images);
scrollbar_div = document.getElementById(conf_scrollbar);
slider_div = document.getElementById(conf_slider);
caption_div = document.getElementById(conf_captions);
/* Cache global variables, that only change on refresh */
images_width = img_div.offsetWidth;
images_top = imageflow_div.offsetTop;
images_left = imageflow_div.offsetLeft;
max_conf_focus = conf_focus * xstep;
size = images_width * 0.5;
scrollbar_width = images_width * 0.6;
conf_slider_width = conf_slider_width * 0.5;
max_height = images_width * 0.51;
/* Change imageflow div properties */
imageflow_div.style.height = max_height + 'px';
/* Change images div properties */
img_div.style.height = images_width * 0.338 + 'px';
/* Change captions div properties */
caption_div.style.width = images_width + 'px';
caption_div.style.marginTop = images_width * 0.03 + 'px';
/* Change scrollbar div properties */
scrollbar_div.style.marginTop = images_width * 0.2 + 'px';
scrollbar_div.style.marginLeft = images_width * 0.2 + 'px';
scrollbar_div.style.width = scrollbar_width + 'px';
/* Set slider attributes */
slider_div.onmousedown = function () { dragstart(this); };
slider_div.style.cursor = conf_slider_cursor;
/* Cache EVERYTHING! */
max = img_div.childNodes.length;
var i = 0;
for (var index = 0; index < max; index++)
{
var image = img_div.childNodes.item(index);
if (image.nodeType == 1)
{
array_images[i] = index;
/* Set image onclick by adding i and x_pos as attributes! */
image.onclick = function() { glideTo(this.x_pos, this.i); }
image.x_pos = (-i * xstep);
image.i = i;
/* Add width and height as attributes ONLY once onload */
if(onload == true)
{
image.w = image.width;
image.h = image.height;
}
/* Check source image format. Get image height minus reflection height! */
switch ((image.w + 1) > (image.h / (conf_reflection_p + 1)))
{
/* Landscape format */
case true:
image.pc = 118;
break;
/* Portrait and square format */
default:
image.pc = 100;
break;
}
/* Set ondblclick event */
image.url = image.getAttribute('longdesc');
image.ondblclick = function() { document.location = this.url; }
/* Set image cursor type */
image.style.cursor = conf_images_cursor;
i++;
}
}
max = array_images.length;
/* Display images in current order */
moveTo(current);
glideTo(current, caption_id);
}
/* Show/hide element functions */
function show(id)
{
var element = document.getElementById(id);
element.style.visibility = 'visible';
}
function hide(id)
{
var element = document.getElementById(id);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
/* Hide loading bar, show content and initialize mouse event listening after loading */
window.onload = function()
{
if(document.getElementById(conf_imageflow))
{
hide(conf_loading);
refresh(true);
show(conf_images);
show(conf_scrollbar);
initMouseWheel();
initMouseDrag();
}
}
/* Refresh ImageFlow on window resize */
window.onresize = function()
{
if(document.getElementById(conf_imageflow)) refresh();
}
/* Fixes the back button issue */
window.onunload = function()
{
document = null;
}
/* Handle the wheel angle change (delta) of the mouse wheel */
function handle(delta)
{
var change = false;
switch (delta > 0)
{
case true:
if(caption_id >= 1)
{
target = target + xstep;
new_caption_id = caption_id - 1;
change = true;
}
break;
default:
if(caption_id < (max-1))
{
target = target - xstep;
new_caption_id = caption_id + 1;
change = true;
}
break;
}
/* Glide to next (mouse wheel down) / previous (mouse wheel up) image */
if (change == true)
{
glideTo(target, new_caption_id);
}
}
/* Event handler for mouse wheel event */
function wheel(event)
{
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta)
{
delta = event.wheelDelta / 120;
}
else if (event.detail)
{
delta = -event.detail / 3;
}
if (delta) handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
/* Initialize mouse wheel event listener */
function initMouseWheel()
{
if(window.addEventListener) imageflow_div.addEventListener('DOMMouseScroll', wheel, false);
imageflow_div.onmousewheel = wheel;
}
/* This function is called to drag an object (= slider div) */
function dragstart(element)
{
dragobject = element;
dragx = posx - dragobject.offsetLeft + new_slider_pos;
}
/* This function is called to stop dragging an object */
function dragstop()
{
dragobject = null;
dragging = false;
}
/* This function is called on mouse movement and moves an object (= slider div) on user action */
function drag(e)
{
posx = document.all ? window.event.clientX : e.pageX;
if(dragobject != null)
{
dragging = true;
new_posx = (posx - dragx) + conf_slider_width;
/* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */
if(new_posx < ( - new_slider_pos)) new_posx = - new_slider_pos;
if(new_posx > (scrollbar_width - new_slider_pos)) new_posx = scrollbar_width - new_slider_pos;
var slider_pos = (new_posx + new_slider_pos);
var step_width = slider_pos / ((scrollbar_width) / (max-1));
var image_number = Math.round(step_width);
var new_target = (image_number) * -xstep;
var new_caption_id = image_number;
dragobject.style.left = new_posx + 'px';
glideTo(new_target, new_caption_id);
}
}
/* Initialize mouse event listener */
function initMouseDrag()
{
document.onmousemove = drag;
document.onmouseup = dragstop;
/* Avoid text and image selection while dragging */
document.onselectstart = function ()
{
if (dragging == true)
{
return false;
}
else
{
return true;
}
}
}
function getKeyCode(event)
{
event = event || window.event;
return event.keyCode;
}
document.onkeydown = function(event)
{
var charCode = getKeyCode(event);
switch (charCode)
{
/* Right arrow key */
case 39:
handle(-1);
break;
/* Left arrow key */
case 37:
handle(1);
break;
}
}
Voila. Je suis perdue à l'aide!!
Merci
à bientôt