Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- -- part of html page:
- <div id="mainbackground">
- <img src="images/home/background.png" id="mainbackgroundimage"/>
- <!-- 6 divs for hover/clickable areas -->
- <div id="infojarne">
- <img src="images/home/infojarne.gif" id="inforjaneImg">
- </div>
- <div id="paintings">
- <img src="images/home/paintings.gif" id="paintingsImg">
- </div>
- <div id="etc">
- <img src="images/home/etc.gif" id="etcImg">
- </div>
- <div id="projects">
- <img src="images/home/projects.gif" id="projectsImg">
- </div>
- <div id="digitalart">
- <img src="images/home/digitalart.gif" id="digitalartImg">
- </div>
- <div id="drawings">
- <img src="images/home/drawings.gif" id="drawingsImg">
- </div>
- </div>
- --Javascript file to set positioning:
- // because ie does not support console if not in debug...
- if (!window.console) console = {log: function() {},info: function(){}};
- $("document").ready(function(){
- function ImageDimensions (width, height, x, y, id){
- this.width = width;
- this.height = height;
- this.x = x;
- this.y = y;
- if(id){
- var $div = $(id);
- $div.css("z-index", "1");
- if(id == "#etc"){
- $div.css("right", "0px");
- $div.css("bottom", "0px");
- }else{
- $div.css("left", this.x +"px");
- $div.css("top", this.y +"px");
- }
- $div.css("width", this.width +"px");
- $div.css("height", this.height +"px");
- $div.hover(
- function(event){
- $div.find("img").show();
- },
- function(event){
- $div.find("img").hide();
- }
- );
- $div.click(function(){
- var location;
- if($div.attr("id") == "infojarne"){
- $(window.location).attr('href', 'infojarne.html');
- }if($div.attr("id") == "digitalart"){
- $(window.location).attr('href', 'digitalart.html');
- }else{
- console.info("unknown id : " + id);
- }
- });
- var $imgObj = $(id+ " img");
- $imgObj.hide();
- }
- };
- var background = new ImageDimensions(836, 638);
- // TODO on resize recalc this + reposition
- var windowWidth = $(window).width();
- console.info("windowWidth:" + windowWidth);
- var leftMargin = (windowWidth - background.width) /2;
- console.info("left margin:" + leftMargin);
- $("#mainbackground").css("left",leftMargin+"px");
- $("#mainbackground").css("z-index","0");
- var infojarne = new ImageDimensions(413, 200, 149, 0, "#infojarne");
- var drawings = new ImageDimensions(272, 138, 0 ,200, "#drawings");
- var digital = new ImageDimensions(276, 172, 0, 338, "#digitalart");
- var projects = new ImageDimensions(311, 128 ,276, 509, "#projects");
- var etc = new ImageDimensions(249, 299, 587, 340, "#etc");
- var paintings = new ImageDimensions(290, 138, 546, 200, "#paintings");
- });
- DESCRIPTION OF CODE (WHAT AM I TRYING TO ACHIVE):
- *. set the encapsulating div "mainbackground" in the center of the screen.(position relative) + set the width and height of the div. This equals the dimensions of the background image "#mainbackgroundimage"
- *. the containing divs should react on hovers, and show the image that they hide when the div is hovered.
- Therefore i have set the divs width and height and position so the hover can happen, and hidden the image contained in that div.
- PROBLEM:
- For some reason this does not work on IE9. It works however on FireFox and Chrome.
- I have tried some stuff with the z-index but at no avail ...
- Can anybody shed some light on this issue
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement