Ciao a tutti!
Vi scrivo perchè ho dei problemi con l' html e il .css
L' idea è di realizzare un sito a pagina intera con uno sfondo che raffigura dei pilastri non allineati in modo da formare dei triangoli irregolari che al passaggio del mouse cambiano l' interno.
Ho già fatto varie prove.. e sembra funzionare tutto perfettamente, l' unica cosa che non riesco a fare è di impostare la pagina intera.
Vi posto i codici:
Html
Style.csscodice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bolig Robotten</title> <!--[if lt IE 7]> <script defer type="text/javascript" src="js/pngfix.js"></script> <![endif]--> <link href="../prove/Bolig Robotten_files/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../prove/Bolig Robotten_files/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="../prove/Bolig Robotten_files/easySlider1.5.js"></script> <script type="text/javascript" src="../prove/Bolig Robotten_files/jquery.fullscreenr.js"></script> <script type="text/javascript"> var FullscreenrOptions = { width: 1024, // Larghezza Immagine originale height: 768, // ALtezza Immagine originale bgID: '#bgimg' // Contenitore dell'immagine }; jQuery.fn.fullscreenr(FullscreenrOptions); </script> <script type="text/javascript"> $(document).ready(function(){ /* Start Map Controls*/ jQuery("#map-container area").mouseover(function(){ var regionMap = '.'+$(this).attr('id')+'-map'; jQuery(regionMap).css('display', 'inline'); }).mouseout(function(){ var regionMap = '.'+$(this).attr('id')+'-map'; // Check if a click event has occured and only change the Region hover state accodringly if (! jQuery(regionMap).hasClass('selected')) { jQuery(regionMap).css('display', 'none'); } }); jQuery("#map-container area").click(function(){ jQuery('#map-container img.region').removeClass('selected').css('display', 'none'); jQuery('#practice-container ul').removeClass('selected').css('display', 'none'); var regionMap = '.'+$(this).attr('id')+'-map'; jQuery(regionMap).addClass('selected').css('display', 'inline'); }); /* End Map Controls*/ $("#slider").easySlider(); /* Start Login Controls*/ $('#login_box').mouseenter(function() { $('#login_box').removeClass("login_box_small"); $('#login_box').addClass("login_box_large"); $("#login_btn_box").removeClass("login_link_box_hidden"); $("#login_btn_box").addClass("login_link_box_visible"); }); $('#login_box').mouseleave(function() { if (!$("#username").is(":focus") && !$("#password").is(":focus")) { $('#login_box').removeClass("login_box_large"); $('#login_box').addClass("login_box_small"); $("#login_btn_box").removeClass("login_link_box_visible"); $("#login_btn_box").addClass("login_link_box_hidden"); } }); $('#login_box').focusout(function() { $('#login_box').removeClass("login_box_large"); $('#login_box').addClass("login_box_small"); $("#login_btn_box").removeClass("login_link_box_visible"); $("#login_btn_box").addClass("login_link_box_hidden"); }); /* End Login Controls*/ /* Start Tab Controls*/ $(".tab_box_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $("a.tab:first").addClass("active") $(".tab_box_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $("ul.tabs li a").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_box_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(this).find("a").addClass("active"); $(activeTab).show(); //Fade in the active content return false; }); /* End Tab Controls*/ $(".checkBox,.checkBoxClear").click(function(srcc) { if ($(this).hasClass("checkBox")) { $(this).removeClass("checkBox"); $(this).addClass("checkBoxClear"); } else { $(this).removeClass("checkBoxClear"); $(this).addClass("checkBox"); } }); $('#green1').mouseenter(function() { $('#green11').show(400); $('#green1').hide(400); }); $('#green11').mouseleave(function() { $('#green1').show(400); $('#green11').hide(400); }); $('#green2').mouseenter(function() { $('#green21').show(400); $('#green2').hide(400); }); $('#green21').mouseleave(function() { $('#green2').show(400); $('#green21').hide(400); }); $('#green3').mouseenter(function() { $('#green31').show(400); $('#green3').hide(400); }); $('#green31').mouseleave(function() { $('#green3').show(400); $('#green31').hide(400); }); $("#combobox dt a").click(function() { $("#combobox dd ul").toggle(); }); $("#combobox dd ul li a").click(function() { var text = $(this).html(); $("#combobox dt a span").html(text); $("#combobox dd ul").hide(); $("#result").html("Selected value is: " + getSelectedValue("sample")); return false; }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $("#combobox dd ul").hide(); return false; }); }); </script> </head> <body> [img]../immagini/img_0009_Livello-1.png[/img] <div id="map-view-container"> <div id="map-container"> [img]../immagini/img_0009_Livello-1.png[/img] [img]../prove/Bolig Robotten_files/transparentMap.gif[/img] <map name="regionMapView" id="regionMapView"> <area id="verde" title="Verde" onclick="" coords="604,238,958,336,546,746" shape="poly"> <area shape="poly" coords="636,416" href="#" alt="" /> </map> [img]../prove/Bolig Robotten_files/verde.png[/img] [img]../prove/Bolig Robotten_files/nordsjaelland.png[/img] [img]../prove/Bolig Robotten_files/syddanmark.png[/img] [img]../prove/Bolig Robotten_files/midtjylland.png[/img] [img]../prove/Bolig Robotten_files/bornholm.png[/img] [img]../prove/Bolig Robotten_files/kobenhavn.png[/img] [img]../prove/Bolig Robotten_files/sjaelland.png[/img] [img]../prove/Bolig Robotten_files/sfondo.jpg[/img] </div> </div> </div> </body></html>
Ringrazio anticipatamente tutti coloro che interverranno.codice:#container { position:absolute; height:2px; width: 100%; margin: 0; padding: 0; } #map-container { float: left; position: relative; } #regionMapView { border: none; } #map-view-container img.map { position: relative; z-index: 100; border: solid 0px; } #map-view-container img.map area:hover { border: solid 0px red; } #map-view-container img.region { display: none; left: 0px; position: absolute; top: 0px; z-index: 20; border: solid 0px; } #map-view-container img.regionBg { left: 0px; position: absolute; top: 0px; z-index: 19; border: solid 0px;
Saluti
Giovanni
Rispondi quotando