Jump to content

How to have a hover image change in a specific spot


joecool

Recommended Posts

Hi all,

 

I wonder if it is okay if I ask two questions. It is? Good! :clap:

 

1. If you look at my test page (at the bottom of this post) on one of my sites that I am updating you will see that I have 6 squarish boxes and the image at the bottom (the go image) changes whenever you hover over anywhere on the images. However I would like it so that it only changes when you hover over the "Go" not when you hover over the image in general.

 

My guess is I will probably have to "Map" it in someway just as I would if I wanted to map a link to a particular part of an image, but I don't know how to do this one. Here is the code I am currently using for it:

 

<div id="boxes">

<div class="box1"><img src="images/1_LIGHT_BLUE1b.png" onmouseover="this.src='images/1_LIGHT_BLUE2b.png'" onmouseout="this.src='images/1_LIGHT_BLUE1b.png'"></div>

<div class="box2"><img src="images/2_ORANGE1b.png" onmouseover="this.src='images/2_ORANGE2b.png'" onmouseout="this.src='images/2_ORANGE1b.png'"></div>

<div class="box3"><img src="images/3_PURPLE1B.png" onmouseover="this.src='images/3_PURPLE2B.png'" onmouseout="this.src='images/3_PURPLE1B.png'"></div>

<div class="box4"><img src="images/4_DARK_GREEN1b.png" onmouseover="this.src='images/4_DARK_GREEN2b.png'" onmouseout="this.src='images/4_DARK_GREEN1b.png'"></div>

<div class="box5"><img src="images/5_DARK_BLUE1a.png" onmouseover="this.src='images/5_DARK_BLUE2b.png'" onmouseout="this.src='images/5_DARK_BLUE1a.png'"></div>

<div class="box6"><img src="images/6_PINK1b.png" onmouseover="this.src='images/6_PINK2b.png'" onmouseout="this.src='images/6_PINK1b.png'"></div>

</div>

 

And here is the corresponding CSS:

 

#boxes {margin:0 auto; position:relative; width:100%; height:585px;}

#boxes .box1 {position:absolute; left:5px; top:5px;}

#boxes .box2 {position:absolute; left:320px; top:5px;}

#boxes .box3 {position:absolute; right:5px; top:5px;}

#boxes .box4 {position:absolute; left:5px; top:295px;}

#boxes .box5 {position:absolute; left:320px; top:295px;}

#boxes .box6 {position:absolute; right:5px; top:295px;}

 

 

How do I achieve just having the change of image happen when I hover over a particular part of the image, only.

 

2. I have some pictures of people that come up on a rotating bases under my navigation bar. I have placed the pictures in the spot they are in via positioning; however, because of the way I have done it it has left a big gap in my page because the page knows that there is still the javascript there. i.e. it has:

 

<div id="photos">

<div id="fadeshow1" class="photosmove"></div>

</div>

 

which relates to the pictures. The css for "photos" and "photosmove" is:

 

 

#photos {margin:0; position:relative; width:400px; height:280px; left:36px; top:-312px;}

#photos .photosmove {position:absolute; right:10px; top:5px;}

 

 

Is there anyway to get the page to act as if the <div id="photos"><div id="fadeshow1" class="photosmove"></div>

</div> was not physically there so that I will not have a big white gap in the middle of the page?

 

Once you look at my page you will see exactly what I mean.

 

Any help and advice would be gratefully received.

 

Here is the test page:

 

http://tinyurl.com/6cu4u6s

Edited by joecool
Link to comment
Share on other sites

You will need to break it down some because using the image tag along with mouseover will swap the entire images.

 

In a nutshell, set up your box image to not have 'GO'. Place that box image to be as a background via css instead. Now create the GO image to be used as a background for the anchor tag with the necessary width/height applied. You can then position that anchor tag to the lower right of your boxes.

Link to comment
Share on other sites

You will need to break it down some because using the image tag along with mouseover will swap the entire images.

 

In a nutshell, set up your box image to not have 'GO'. Place that box image to be as a background via css instead. Now create the GO image to be used as a background for the anchor tag with the necessary width/height applied. You can then position that anchor tag to the lower right of your boxes.

 

 

Thanks Eddie,

 

The amazing thing is that what you have just said to me, two months ago it would have been like you are talking an alien language, but I actually kind of understand what you are saying and I will work this weekend on putting it into practise.

 

Thanks

Link to comment
Share on other sites

That white space is caused by using position:relative. Using position:relative means that the browser still leaves space for the content, and then moves it based on it's natural position in the document.

 

To fix this, I would move your #photos div within #headwrap, and then use position:absolute instead of relative. Position:absolute will take those elements out of the document flow completely (leaving no empty space anywhere) and then use a top/left value to position them. Make sure that #headwrap uses position:relative, since that allows elements within #headwrap with position:absolute to display in the correct location.

Link to comment
Share on other sites

That white space is caused by using position:relative. Using position:relative means that the browser still leaves space for the content, and then moves it based on it's natural position in the document.

 

To fix this, I would move your #photos div within #headwrap, and then use position:absolute instead of relative. Position:absolute will take those elements out of the document flow completely (leaving no empty space anywhere) and then use a top/left value to position them. Make sure that #headwrap uses position:relative, since that allows elements within #headwrap with position:absolute to display in the correct location.

 

Thanks for that Ben. I figured it was the positioning that was causing the problem but I just didn't know how to fix it.

 

I have tried to implement what you said, but there is still a big white space, it still isn't taking it out of the flow of the rest of the page. I obviously doing something wrong. I don't know if there is some special rule for it because it is a js script. I am at a loss, I have been trying to figure it out for about 2 hours.

 

Here is what I have now:

 

in my css file:

 

#headwrap {margin:0 auto; position:relative; width:918px; height:270;}

#headwrap .photosmove {position:absolute; right:-26px; top:-306px;}

 

In my header include:

 

<div id="headwrap"><!--start head wrapper-->

<img src="../images/FRONT_STRIP1.png" class="centre2">

<div id="fadeshow1" class="photosmove"></div>

</div><!--end head wrapper-->

 

Can someone explain where I am going wrong and if it doesn't take them to long, just give me the amendments I need to make to fix it. In total I have been working on these two problems for over 3 hours and they now getting to me. :blink:

 

I understand the concept of positioning and I have been using it to good effect for text and images but for some reason it doesn't seem to work in this situation and I don't understand why.

 

 

Thanks

Link to comment
Share on other sites

The first thing to do probably is to disable javascript, so any styles that you are using to fade the images in/out don't affect the document. If you do that, the blank space disappears, but the image disappears as well. This is due to this style:

 

#headwrap .photosmove { top:-306px; right:-26px; }

 

Re-enable Javascript after removing those styles, and you'll notice that the slideshow moves down the page to the original spot, below the image, and this is what is causing the white space.

 

This is because the Javascript you've added overrides the position:absolute on .photosmove to use position:relative instead, since the photos inside of .photosmove use position:absolute, and making both the photos and the photo wrapper use position:absolute would result in display weirdnesses for a lot of people.

 

There are two ways to fix this:

 

-- recode #headwrap to use a background image instead of a large image that you have to absolutely position elements on top of, and remove the current negative top/right styles from .photosmove.

-- add a wrapper around .photosmove that uses position:absolute to move the photos into the correct position, and remove the current negative top/right styles from .photosmove.

 

Hopefully that makes sense. Let me know if you have any other questions.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...