thumbnails when clicked on change background

10 years ago

Originally Posted by ecoverbee20

I'm creating asite and would like to try and get it so that when you hover on the images it changes the background image.

Does anyone know how this is done and can help me put it together. I can pay $10 as think it will be a quick job

site where you can see what i'm after is Kate Mell - Enthusiastic and extremely passionate about flowers | Wetherby Flowers | North Yorkshire Florist | Wedding Flowers

Thanks
Andy

Hi I can help you with your website and hover effect what you want.
Contact me via e-mail : designpsd@abv.bg

Thanks

{{ DiscussionBoard.errors[9114467].message }}

ecoverbee20

10 years ago

sent an email thanks

Thanks
1 reply

Signature

**FIVE STAR Banners** - Get your banners designed Today for just $5 - Click Here!!!

{{ DiscussionBoard.errors[9114962].message }}

BrainyBiz 10 years ago
It looks like you already have this taken care of. A few suggestions though:

1. The background images on your site are a bit large (file size) which makes them load slowly when a visitor hovers over them for the first time and they take a few seconds to load. You probably won't notice this because you already have the images in your cache. I suggest optimizing the images so they load faster.

2. You could pre-load all the images when the page loads the first time which would make it so there is no delay when visitors hover over the thumbnails.

To pre-load the images put the following code before the closing body tag:
HTML Code:

<div style="display:none;"> <img src="http://www.katemell.co.uk/media/images/site/home/first.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/home/bg7.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/home/bg3.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/home/bg1.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/home/bg6.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/home/shop.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/wedding/bg9.jpg" /> <img src="http://www.katemell.co.uk/media/images/site/home/bg4.jpg" /> </div>
I also went ahead and optimized your background images and attached them to this reply. Simply unzip them and upload them over the images on your server. Their file size is about 4.5 times smaller then the originals. (make sure to save a copy of the originals though)
- [ 10 ] Thanks
{{ DiscussionBoard.errors[9119286].message }}

ecoverbee20

10 years ago

thanks but the katemell site isnt mine. I need something similar which I have designed at Sharpes Of Wollaton but would like the hover images to change the background.

please help. I will pay for the one who can help me sort this out.

Thanks
Andy

Thanks
1 reply

Signature

**FIVE STAR Banners** - Get your banners designed Today for just $5 - Click Here!!!

{{ DiscussionBoard.errors[9130992].message }}

BrainyBiz

10 years ago

Originally Posted by ecoverbee20

thanks but the katemell site isnt mine. I need something similar which I have designed at Sharpes Of Wollaton but would like the hover images to change the background.

please help. I will pay for the one who can help me sort this out.

Thanks
Andy

Oh, oops. I can help you with your actual site also. I'll do it for free, it's a small job. I have a few questions:

1. How many images do you have that need to use the hover background effect? As of Right now it looks like you have 4 thumbnail images up on Sharpes Of Wollaton but there are 2 blank thumbnail spots.

2. Please post links to all the thumbnails and full size images you want to use. Then I will write up a small javascript that will make it work for you.

[ 1 ] Thanks

{{ DiscussionBoard.errors[9134092].message }}

Paul Myers

10 years ago

BrainyBiz,

THAT is the Warrior spirit I remember from back in the day.

Thank you, sir. That was a classy thing to do.

Paul

[ 2 ] Thanks

Signature

.
Stop by Paul's Pub - my little hangout on Facebook.

{{ DiscussionBoard.errors[9133245].message }}

Dennis Millbrath

10 years ago

Thank you for the tip, I am going to make a note of this incase I need something like that one day.

Thanks

{{ DiscussionBoard.errors[9133818].message }}

ecoverbee20

10 years ago

Great thanks for the help

I have 4 images but may need 6 in the future if that's possible for me to change later on if need be.

the images are located at Index of /sitetest/images

Thanks
Andy

Thanks
1 reply

Signature

**FIVE STAR Banners** - Get your banners designed Today for just $5 - Click Here!!!

{{ DiscussionBoard.errors[9134115].message }}

BrainyBiz

10 years ago

I attached a zip file with all the changed files. Simply upload them over the originals on your server. It looks like your images are already optimized to 79% which is pretty good. Again, please keep a copy of the originals in case you need them for something later.

Here is a list of the changes I made:

1. I added some javascript to the head of index.html to make the background image change when you hover over the thumbnails. It uses Google's hosted jquery.

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".LeftThumbnails").mouseover( function() {
		var fullImage = $(this).data('img');
		if (fullImage != "") {
			var css = "url(" + fullImage + ")";
			$('#MainContent').css('backgroundImage',css);
		}
	});
});
</script>

2. In the original code each of the thumbnails used the same id (#LeftThumbnails). That won't work because an id can be used only once per page. So I changed them all to a class (.LeftThumbnails). I changed the id to a class in stylesheet.css also so your original styles will still work.

3. I made a transparent PNG for the back ground of #LeftContent so you can see the full size image behind it. I also commented out the background-color in stylesheet.css to make the transparent background work.

4. I set it up so you can add as many images as you want in the future. Here is the format to follow to make them work:

Code:

<div class="LeftThumbnails" data-img="FULL SIZE IMAGE URL HERE" align="center"><img src="THUMBNAIL IMAGE URL HERE"/></div>

5. I added the image preloading code before the closing body tag. If you do add more images; make sure to add the full size image to this div also so it will preload when the page loads.

Code:

<div style="display:none;">
	<img src="images/hinderfull-8x6.jpg" />
	<img src="images/cakesfull-8x6.jpg" />
	<img src="images/sowfull-8x6.jpg" />
	<img src="images/hindershopfull-8x6.jpg" />
</div>

6. You can choose the default image that loads when the page is first loaded by setting the background-image property for #MainContent in stylesheet.css. You have is set as images/hindershopfull-8x6.jpg right now so I left it as that.

Go ahead and upload all the files in the zip and let me know if you have any questions.

[ 2 ] Thanks
1 reply

{{ DiscussionBoard.errors[9134496].message }}

ecoverbee20

10 years ago

Originally Posted by BrainyBiz

I attached a zip file with all the changed files. Simply upload them over the originals on your server. It looks like your images are already optimized to 79% which is pretty good. Again, please keep a copy of the originals in case you need them for something later.

Here is a list of the changes I made:

1. I added some javascript to the head of index.html to make the background image change when you hover over the thumbnails. It uses Google's hosted jquery.

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".LeftThumbnails").mouseover( function() {
        var fullImage = $(this).data('img');
        if (fullImage != "") {
            var css = "url(" + fullImage + ")";
            $('#MainContent').css('backgroundImage',css);
        }
    });
});
</script>

2. In the original code each of the thumbnails used the same id (#LeftThumbnails). That won't work because an id can be used only once per page. So I changed them all to a class (.LeftThumbnails). I changed the id to a class in stylesheet.css also so your original styles will still work.

3. I made a transparent PNG for the back ground of #LeftContent so you can see the full size image behind it. I also commented out the background-color in stylesheet.css to make the transparent background work.

4. I set it up so you can add as many images as you want in the future. Here is the format to follow to make them work:

Code:

<div class="LeftThumbnails" data-img="FULL SIZE IMAGE URL HERE" align="center"><img src="THUMBNAIL IMAGE URL HERE"/></div>

5. I added the image preloading code before the closing body tag. If you do add more images; make sure to add the full size image to this div also so it will preload when the page loads.

Code:

<div style="display:none;">
    <img src="images/hinderfull-8x6.jpg" />
    <img src="images/cakesfull-8x6.jpg" />
    <img src="images/sowfull-8x6.jpg" />
    <img src="images/hindershopfull-8x6.jpg" />
</div>

6. You can choose the default image that loads when the page is first loaded by setting the background-image property for #MainContent in stylesheet.css. You have is set as images/hindershopfull-8x6.jpg right now so I left it as that.

Go ahead and upload all the files in the zip and let me know if you have any questions.

Wow amazeballs. I'm so happy it works great do you have a PayPal address and I will send you some funds for this wonderful job.

Thanks
Andy

Thanks
1 reply

Signature

**FIVE STAR Banners** - Get your banners designed Today for just $5 - Click Here!!!

{{ DiscussionBoard.errors[9134602].message }}

BrainyBiz 10 years ago

Originally Posted by ecoverbee20

Wow amazeballs. I'm so happy it works great do you have a PayPal address and I will send you some funds for this wonderful job.

Thanks
Andy

I'm glad you like it. No need for any payment. I'm happy to help people out from time to time. It puts a smile on my face.
- [ 2 ] Thanks
{{ DiscussionBoard.errors[9134833].message }}

ecoverbee20

10 years ago

that's very good of you. thanks

Thanks

Signature

**FIVE STAR Banners** - Get your banners designed Today for just $5 - Click Here!!!

{{ DiscussionBoard.errors[9136977].message }}

thumbnails when clicked on change background

Trending Topics

Any thoughts on golf's latest phenom...Scottie Scheffler??

Should i Index Author pages?

best high quality crypto traffic.

Some interesting stats about brand comms

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?