2 Replies - 2119 Views - Last Post: 25 January 2011 - 04:40 AM

#1 Guest_guest with a problem*


Reputation:

div/img over an image

Posted 25 January 2011 - 03:13 AM

Hi ,I want to have a big header with two small images inside of it , so when I click on one of those small ones it becomes the main one. The problem is i can't use javascript to do this if my header is a css background image (if you know a way i can, that would be great). So my plan was to put my header image inside of the header div, and then put another div over it in wich i would put the two smaller images. the problem is they dont overlap, i guess the solution is either to use absolute/relative positioning or a z-index , but i dont know much about either of them , and i can't get it working. to anyone who knows how to solve this, thank you in advance.

Is This A Good Question/Topic? 0

Replies To: div/img over an image

#2 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: div/img over an image

Posted 25 January 2011 - 03:33 AM

You could use jQuery to change the CSS when you click an image if you give it an id, For example:
$("#image1").click(function () {
$("#header").css("background-image", "url(secondimage.png)");
});



Hope this helps
Was This Post Helpful? 0
  • +
  • -

#3 Gorian  Icon User is offline

  • ninja DIC
  • member icon

Reputation: 120
  • View blog
  • Posts: 1,681
  • Joined: 28-June 08

Re: div/img over an image

Posted 25 January 2011 - 04:40 AM

regular Javascript can also change css.

function onMouseClick(){
    var object = document.getElemenyById('objectID');
    object.style.backgroundImage = "URL(secondimage.png);";
    //in Javascript, any CSS element with a hyphen "-",
    //remove it, and capitalize the second word
}


This post has been edited by Gorian: 25 January 2011 - 04:41 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1