bonjour,
je reviens vers vous car je butte sur une intégration, en fait une grosse copie de ce que j'ai vu car très bien fichu...
Plugin :
Modèle :
étape une : j'ai identifié la partie CSS qui m'interessait :
Ensuite j'ai chargé le JAvascript qui initialise les fonctions
J'ai donc dans mon Head :
j'intègre donc dans mon Body dans la section approprié :
et le résultat actuel est çà : il n'y a que le légende qui est affiché, toutes les autres images de la map ne sont pas trouvés biens que les fonctions semblent opérationnelles...
http://img641.imageshack.us/img641/7260/capturecrt.png
j'ai checké l'arborescence que j'ai mise en place...
/images/map/*** pour toutes les images que j'ai récupérés...
cependant il n'y a que légende qui soit valable... avec les img:hover... + menu de retour de zoom et les pops up infos... donc il ne me trouve pas l'essentiel la map !
Si une âme charitable voulait bien me sortir de ce bourbier... Fort aimable !
LeSScro[/i][/i]
Modifié par lesscro (17 Jun 2011 - 16:37)
je reviens vers vous car je butte sur une intégration, en fait une grosse copie de ce que j'ai vu car très bien fichu...
Plugin :
http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-mapsModèle :
http://www.raleigh4u.com/section/interactive-mapétape une : j'ai identifié la partie CSS qui m'interessait :
/*Jquery MAP interactive */
/* Map
=====================================================================*/
#mapcontainer { position: relative; height: 600px; margin-top: 20px; }
#legend { position: absolute; width: 211px; height: 414px; top: 30px; right: 700px; right: 535px; background: url('../images/map/legend.jpg'); }
#legend h3, #legend li { cursor: pointer; cursor: hand; }
#legend h3 { margin: 0; padding: 0; position: absolute; top: 10px; left: 18px; width: 22px; height: 200px; text-indent: -9999em; }
#legend ul { position: absolute; margin: 0 0 0 6px; top: 43px; left: 80px; font-family: arial, sans-serif; }
#legend ul li { color: #0C6566; font-size: 12px; line-height: 31px; }
#map { position: absolute; width: 700px; height: 470px; top: 0; right: 0; background: url('../images/map/map.jpg'); overflow: hidden; }
#returnlink { display: block; position: absolute; width: 146px; height: 30px; right: 12px; bottom: 142px; background: url('../images/map/return-background.png'); border: none; color: white; line-height: 26px; padding: 0 0 0 38px; }
#nw.hover { background: url('../images/map/nw-thumb.jpg'); }
#ne.hover { background: url('../images/map/ne-thumb.jpg'); }
#sw.hover { background: url('../images/map/sw-thumb.jpg'); }
#se.hover { background: url('../images/map/se-thumb.jpg'); }
/* Big Bullets */
#map a.bullet { display: none; position: absolute; display: block; width: 47px; height: 47px; background: url('../images/map/bullets.png'); background-repeat: no-repeat; z-index: 2; border: none; }
#map a.bullet:hover { text-decoration: none; border: none; }
#map a:active, #map a:focus { outline: 0; }
#map a.research { background-position: 0px -3px; }
#map a.communications { background-position: -56px -3px; }
#map a.optics { background-position: -109px -3px; }
#map a.electronics { background-position: -162px -3px; }
#map a.investor { background-position: -215px -3px; }
#map a.imaging { background-position: -268px -3px; }
#map a.sensors { background-position: -321px -3px; }
#map a.semiconductors { background-position: -374px -3px; }
#map a.medical { background-position: -427px -3px; }
#map a.energy { background-position: -480px -3px; }
#map a.miscellaneous { background-position: -533px -3px; }
#map div.popup{ display: none; position: absolute; width: 284px; height: 236px; background: url('../images/map/popup.png') no-repeat; z-index: 10; }
#map div.north-west { bottom: 30px; left: 30px; }
#map div.north-east { top: 30px; right: 30px; }
#map div.south-east { bottom: 30px; right: 30px; }
#map div.south-west { bottom: 30px; left: 30px; }
/* popup bullets */
#map div.popup h4 { position: absolute; margin: 0; width: 100%; padding: 0; height: 30px; line-height: 30px; color: white; text-align: center; top: 35px; font-weight: normal; font-size: 11px; }
#map div.popup h4 span{ display: inline-block; margin-right: 2px; width: 30px; height: 30px; background: url('../images/map/bullets2.png'); background-repeat: no-repeat; z-index: 2; border: none; }
#map div.popup h4 span.research { background-position: 0px 0px; }
#map div.popup h4 span.communications { background-position: -30px 0px; }
#map div.popup h4 span.optics { background-position: -60px 0px; }
#map div.popup h4 span.electronics { background-position: -90px 0px; }
#map div.popup h4 span.investor { background-position: -120px 0px; }
#map div.popup h4 span.imaging { background-position: -150px 0px; }
#map div.popup h4 span.sensors { background-position: -180px 0px; }
#map div.popup h4 span.semiconductors { background-position: -210px 0px; }
#map div.popup h4 span.medical { background-position: -240px 0px; }
#map div.popup h4 span.energy { background-position: -270px 0px; }
#map div.popup h4 span.miscellaneous { background-position: -300px 0px; }
#map div.popup h3 { margin: 0; padding: 0; position: absolute; font-size: 14px; color: white; text-align: center; width: 100%; top: 10px; }
#map div.popup div.popupcontent{ position: absolute; top: 73px; padding: 10px 20px; width: 244px; font-size: 13px; line-height: 18px; }
#map div.popup div.popupcontent p{ margin: 10px 0; }
#map div.popup div.popupcontent a { color: #55A9C1; border-bottom: 1px dotted #55A9C1; }
#map div.popup a.close{ display: block; position: absolute; bottom: 5px; right: 9px; width: 60px; height: 12px; text-indent: -9999em; border: none; }
#map div.popup a.close:hover { border: none; }
/* End Interactive MAP */Ensuite j'ai chargé le JAvascript qui initialise les fonctions
$(document).ready(function(){
// Initialize Map
$('#legend').data('state', 'closed');
//Legend Switch
$('#legend h3').click(function(){ $('#legend').trigger('toggle'); });
// Legend Toggling
$('#legend').bind('toggle', function(){
if($(this).data('state') == 'closed'){
$(this).animate({right: '700px'});
$(this).data('state', 'open');
}else{
$(this).animate({right: '535px'});
$(this).data('state', 'closed');
}
});
//Zoomable Hovers
$('img.zoomable').live('mouseover',function(){ $(this).addClass('hover'); } )
.live('mouseout' ,function(){ $(this).removeClass('hover'); } );
//ZoomMap Plugin
$('#map').zoommap({
// Width and Height of the Map Area
width: '700px',
height: '470px',
//Misc Settings
blankImage: '/images/map/blank.gif',
loadingImage: '/images/map/loading.gif',
fadeDuration: 500,
zoomDuration: 1000,
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
//Return to Parent Map Link
showReturnLink: true,
returnId: 'returnlink',
returnText: 'return to regional map',
//Initial Region to be shown
map: {
id: 'triangle',
title: 'Triangle',
image: '/images/map/map.jpg',
maps: [
{
id: 'nw',
title: 'North West',
parent: 'triangle',
image: '/images/map/nw.jpg',
data: '/section/north-west',
width: '350px',
height: '235px',
top: '0px',
left: '0px'
},
{
id: 'ne',
title: 'North East',
parent: 'triangle',
image: '/images/map/ne.jpg',
data: '/section/north-east',
width: '350px',
height: '235px',
top: '0px',
left: '350px'
},
{
id: 'sw',
title: 'South West',
parent: 'triangle',
image: '/images/map/sw.jpg',
data: '/section/south-west',
width: '350px',
height: '235px',
top: '235px',
left: '0px'
},
{
id: 'se',
title: 'South East',
parent: 'triangle',
image: '/images/map/se.jpg',
data: '/section/south-east',
width: '350px',
height: '235px',
top: '235px',
left: '350px'
}
]
}
});
});
/*
* Copyright (C) 2009 Joel Sutherland. Reproduction or redistribution without explicit permission is prohibited.
TODO:
1. Make it so the white zoomable indicator is created by the script
2. Create API
*/
$.fn.zoommap = function(settings) {
var map = $(this);
$(this).data('currentId', '');
/******* Show Map by ID ************/
$(this).bind('showMap', function(e, id, value){
alert(id);
showMapById(id);
//return this?
});
function showMapById(id){
var region = findRegion(settings.map, id);
if(region != -1){
displayMap(region);
}
}
// recursive id find
function findRegion(root, id){
if(root.id == id){
return root;
}else{
if(root.maps != undefined){
for(var i=0; i<root.maps.length; i++){
return findRegion(root.maps[i], id);
}
}
}
return -1;
}
// region is a map
// This gets called every time we zoom
function displayMap(region){
//Set Current Region Id
$(this).data('currentId', region.id);
//Clear the Map and Set the Background Image
map.empty().css({
backgroundImage: 'url(' + region.image + ')',
width: settings.width,
height: settings.height
});
//Show Bullets
if(region.data != undefined){
loadBullets(region.data);
}
//Set up each submap as an item to click
if(region.maps != undefined){
for(var i=0; i<region.maps.length; i++){
addZoom(region.maps[i]);
}
}
//Create Return Link
if(settings.showReturnLink && region.parent != undefined){
showReturnLink(region);
}
}
/************************************************************************************/
//Show Return Link
function showReturnLink(region){
map.after('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
$('#' + settings.returnId).hide().fadeIn().click(function(){
showMapById(region.parent);
$(this).remove();
});
}
//Load the Bullets
function loadBullets(url){
map.load(url, {}, function(){
//place bullets
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: addpx(coords[0]), top: addpx(coords[1])})
.hide()
.click(function(){showPopup($(this).attr('id'));})
.fadeIn('fast');
});
});
}
function showPopup(id, leftbul, topbul){
map.find(settings.popupSelector).fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$(settings.popupCloseSelector).click(function(){
$(this).parent().fadeOut();
});
}
//add a clickable image for a region on the current map
function addZoom(region){
$('<img />').addClass(settings.zoomClass)
.attr({
src: settings.blankImage,
id: region.id
}).css({
position: 'absolute',
width: region.width,
height: region.height,
top: region.top,
left: region.left,
cursor: 'pointer'
}).appendTo(map).click(function(){
//hide neighboring bullets and zoomables
var width = settings.width;
var height = settings.height;
if(region.scan){
width = region.scanwidth;
height = region.scanheight;
}
$(this).siblings().fadeOut();
$(this).hide()
.attr('src', region.image)
.fadeIn('slow')
.animate({
width: width,
height: height,
top: '0px',
left: '0px'
}, settings.zoomDuration, '', function(){
displayMap(region);
});
});
}
function rempx(string){
return Number(string.substring(0, (string.length - 2)));
}
function addpx(string){
return (Number(string) - 26) + 'px';
}
function showHash(string){
string = string.replace('#', '');
showMapById(string);
}
//initialize map
var hash = self.document.location.hash;
if(hash.length > 0)
showHash(hash);
else{
displayMap(settings.map);
}
return this;
};J'ai donc dans mon Head :
<link rel="stylesheet" type="text/css" href="./styles/styles.css" />
<script src="./scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="./scripts/mapsetup.js" type="text/javascript"></script>
j'intègre donc dans mon Body dans la section approprié :
<!--interactive map legend-->
<div class="row2">
<div id="mapcontainer">
<div id="legend">
<h3>Legend</h3>
<ul>
<li>Research/Education</li>
<li>Communications</li>
<li>Optics</li>
<li>Electronics</li>
<li>Investor/Accelerator</li>
<li>Imaging</li>
<li>Sensors</li>
<li>Semiconductors</li>
<li>Medical</li>
<li>Energy</li>
<li>Miscellaneous</li>
</ul>
</div>
<!--Map-->
<div id="map">
</div>
</div>
</div>
et le résultat actuel est çà : il n'y a que le légende qui est affiché, toutes les autres images de la map ne sont pas trouvés biens que les fonctions semblent opérationnelles...
http://img641.imageshack.us/img641/7260/capturecrt.png
j'ai checké l'arborescence que j'ai mise en place...
/images/map/*** pour toutes les images que j'ai récupérés...
cependant il n'y a que légende qui soit valable... avec les img:hover... + menu de retour de zoom et les pops up infos... donc il ne me trouve pas l'essentiel la map !
Si une âme charitable voulait bien me sortir de ce bourbier... Fort aimable !
LeSScro[/i][/i]
Modifié par lesscro (17 Jun 2011 - 16:37)