Javascript help! Reward $25!!!!

32 Posts

overhaulmedia Reply #11, 17 years, 8 months ago

This is way to complex for what I need.. sad

1,611 Posts

ZAP Reply #12, 17 years, 8 months ago

It looks to me as if you’re overcomplicating this. I don’t usually use a function for simple image rollovers anymore because it’s rarely necessary. Wouldn’t this do what you need?

<img src="smallimage.jpg" onmouseover="this.src=’bigimage.jpg’" onmouseout="this.src=’smallimage.jpg’" />

Granted, you can probably get nicer effects is you use jQuery or another library and a plugin, but sometimes simple is best.

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

32 Posts

overhaulmedia Reply #13, 17 years, 8 months ago

Well these are actually remote rollovers, so they don’t change themselves they change a larger image above.

1,611 Posts

ZAP Reply #14, 17 years, 8 months ago

Remote rollovers are not all that different a concept:

<img src="smallimage.jpg" id="myimage" />
<p><a href="#"  onmouseover="myimage.src='bigimage.jpg'" onmouseout="myimage.src='smallimage.jpg'" onclick="return false">show big image</a></p>
<img src="bigimage.jpg" style="display:none" />

You could use slightly different syntax for compatibility with very old browsers, but I wouldn’t bother since this works in IE6.
The second image tag is just to preload the big version; I’ve had better luck preloading that way than with JavaScript, but both will work.

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

32 Posts

overhaulmedia Reply #15, 17 years, 8 months ago

Sweet I think it’s working now thanks to your code.

Here is what I ended up using.

<div class="prodimg">
            <IMG src="[*prod_img*]" name="big" id="myimage" alt="[*prod_title*]" style="height:270px; width:342px;" border="0" class="pic" />
								<ul class="color">
									<li class="title">Available<br />Colours</li>		

<li>
<a href="#" onmouseover="myimage.src='[*ColorSwatch1*]'" onmouseout="myimage.src='[*prod_img*]'" onclick="return false">
<img src="[*ColorSwatch1*]" style="height:26px;width:26px;" />
</a></li>
<li>
<a href="#" onmouseover="myimage.src='[*ColorSwatch2*]'" onmouseout="myimage.src='[*prod_img*]'" onclick="return false">
<img src="[*ColorSwatch2*]" style="height:26px;width:26px;" />
</a></li>
<li>
<a href="#" onmouseover="myimage.src='[*ColorSwatch3*]'" onmouseout="myimage.src='[*prod_img*]'" onclick="return false">
<img src="[*ColorSwatch3*]" style="height:26px;width:26px;" />
</a></li>
<li>
<a href="#" onmouseover="myimage.src='[*ColorSwatch4*]'" onmouseout="myimage.src='[*prod_img*]'" onclick="return false">
<img src="[*ColorSwatch4*]" style="height:26px;width:26px;" />
</a></li>
<img src="[*prod_img*]" style="display:none" style="height:270px; width:342px;" />
                                
								</ul>
							</div>

1,611 Posts

ZAP Reply #16, 17 years, 8 months ago

Question: Don’t you want to show big images in each color?

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

32 Posts

overhaulmedia Reply #17, 17 years, 8 months ago

I am, have a look here: http://www.dressageboutique.com/products/kids-canvas-keyholes.html

1,611 Posts

ZAP Reply #18, 17 years, 8 months ago

I see. Looks nice. I assume that you’re going to change those big swatch images before you’re totally done so they’re not so pixelated (you could just add big- before the image placeholder and upload big versions of those swatches)?

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

32 Posts

overhaulmedia Reply #19, 17 years, 8 months ago

I’m messing around with phpthumb right now to automatically re size them

1,611 Posts

ZAP Reply #20, 17 years, 8 months ago

Do you have photos of every product in every color? I would think that would be the best thing to show in the rollover display, rather than just a bigger swatch. I’ll send you a link to something I did a while back via PM as an example (it uses jQuery, thickbox, and Ajax, but it’s basically the same concept).

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options