Accesory Box/Table

[Ecardius]

Hello everyone,

Im currently working on the build for my new eCommerce business and I was looking for some input on something. I will be selling scopes for firearms on my website and there is about 30 different kinds. I want to do something like ebay does when your looking at an auction and you hover over one of the images and it enlarges.  I want to incorporate this into a nice at the same time.  The theme of my site is a dark gray and black.

Thanks 

[BC_Programmer]

That said, for your problem you have two choices:

1. Hire a web developer to do this.

2.Do it yourself. that seems to be what you are going for you might be able to find something on dynamicdrive.com. If you know javascript, learn jquery- I believe it has functionality that does exactly this. If you don't know javascript then you might be better off with option 1. Also, you make no mention of what CMS you are using, if any, or any of the available technologies that you are using, or that you know how to use, which makes it difficult to advise.

[Ecardius]

Im using an HTML template and I know how to incorporate java.  Nothing fancy here...just focusing on functionality because not every user has a top notch system these days that can handle animation intense websites.

It would have been nice if you lectured him like you did me tbh. And knowing what I am incorporating on my website is important because many of the items look the same and without the enlarge image feature someone could mistakenly order the wrong item.

[BC_Programmer]

I did find this, Which has a few snippets of javascript that you might be able to integrate.

Actually, come to think of it, you can do this without javascript at all, purely via CSS; not sure why I didn't think of it because I am using a similar technique on my own web page for my navigation links.


Basically, you would end up with something like this:

Code: [Select]

<img src="blah/blah/image.png" class="displayimage">

hopefully your template uses the <img> tag for showing the images (assuming it's working as is). Then, you can have css in either a <style> tag or an existing css file:

Code: [Select]

.displayimage {
}

.displayimage:hover{
height: 200%;
        width: 200%;
}


which would expand the image to twice it's size when you rollover it. It doesn't expand "smoothly" though, which might be the effect you want. For that, I would think you would need jQuery, or some other sort of client-side interaction.

I did find a StackOverFlow question that has an answer for that, as well.

[Ecardius]

I did find this, Which has a few snippets of javascript that you might be able to integrate.

Actually, come to think of it, you can do this without javascript at all, purely via CSS; not sure why I didn't think of it because I am using a similar technique on my own web page for my navigation links.


Basically, you would end up with something like this:

Code: [Select]

<img src="blah/blah/image.png" class="displayimage">

hopefully your template uses the <img> tag for showing the images (assuming it's working as is). Then, you can have css in either a <style> tag or an existing css file:

Code: [Select]

.displayimage {
}

.displayimage:hover{
height: 200%;
        width: 200%;
}


which would expand the image to twice it's size when you rollover it. It doesn't expand "smoothly" though, which might be the effect you want. For that, I would think you would need jQuery, or some other sort of client-side interaction.

I did find a StackOverFlow question that has an answer for that, as well.

Thanks I will give this a shot and see how it turns out. 

[kpac]

House cleaning done. Sorry for the "interruption".

The only problem with BC's code is that it doesn't work in IE6 and below, but (thankfully), usage stats for IE6 are on the decrease.