Mouseover Effects to Change a picture
-
- Joomla! Apprentice
- Posts: 21
- Joined: Wed May 27, 2009 12:12 am
Mouseover Effects to Change a picture
Hello all,
I'm still fairly new to Joomla! and I need to have a simple mouseover effect for my site. Basically, I am trying to have one picture swapped for another upon mouse over (to show a "highlight" if you will). Unfortunately, all the java! in the world (both coffee and script) have not been much help.
I am hoping that someone out there can help me with this problem - I know it's rather basic, but I haven't seen the correct answer on any on the threads I've read so far (if I'm wrong, please point out the thread and I'll read the answer there!!)
Thanks!
I'm still fairly new to Joomla! and I need to have a simple mouseover effect for my site. Basically, I am trying to have one picture swapped for another upon mouse over (to show a "highlight" if you will). Unfortunately, all the java! in the world (both coffee and script) have not been much help.
I am hoping that someone out there can help me with this problem - I know it's rather basic, but I haven't seen the correct answer on any on the threads I've read so far (if I'm wrong, please point out the thread and I'll read the answer there!!)
Thanks!
Matt Bruno
- jdaum
- Joomla! Intern
- Posts: 83
- Joined: Sat Sep 03, 2005 5:10 am
- Location: Auckland, NZ
- Contact:
Re: Mouseover Effects to Change a picture
You could try to use the built in mouseover functionality in JCE editor.
HTH, Jochen
HTH, Jochen
http://www.automatem.co.nz - web applications, web 2.0 applications, custom web applications, software solutions, automation in business, automated web application, web database, Joomla web hosting, screen scrape, website backup, database backup
-
- Joomla! Apprentice
- Posts: 21
- Joined: Wed May 27, 2009 12:12 am
- jdaum
- Joomla! Intern
- Posts: 83
- Joined: Sat Sep 03, 2005 5:10 am
- Location: Auckland, NZ
- Contact:
Re: Mouseover Effects to Change a picture
http://www.automatem.co.nz - web applications, web 2.0 applications, custom web applications, software solutions, automation in business, automated web application, web database, Joomla web hosting, screen scrape, website backup, database backup
-
- Joomla! Apprentice
- Posts: 21
- Joined: Wed May 27, 2009 12:12 am
Re: Mouseover Effects to Change a picture
Thanks - unfortunately that page is blocked via webfilter and won't grant me access to that page. Any other ideas? I'd much rather code the Java script - if it's possible to do in Joomla that is.
Matt Bruno
-
- Joomla! Apprentice
- Posts: 27
- Joined: Sat Jul 11, 2009 4:17 pm
Re: Mouseover Effects to Change a picture
wow i was asking this questions earlier but no one answered on my threat, i didn't know how to exactly ask for this mouseover effect, but this is perfect answer. this content editor has everything that joomla need, you don't need to customize css files at all with this editor...
-
- Joomla! Enthusiast
- Posts: 116
- Joined: Thu Apr 19, 2007 6:02 pm
- Location: Pennsylvania
Re: Mouseover Effects to Change a picture
I am not by far a programmer. I am trying to do somewhat of the same thing. If you are writing a javascript and a applet you need the html to call the both of them with a mouseover effect. If you look at W3schools website they will help you out with calling the event with html. As far as the javascript and applet are concerned I can't help you there.
Chris
Chris
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
If you want to put the code in manually... here you go. format you <img> something like this.
Hope this helps.
-Joel
Code: Select all
<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />
-Joel
Joel Wires
- dubjohnston
- Joomla! Apprentice
- Posts: 13
- Joined: Fri Aug 21, 2009 2:49 pm
- Location: Melbourne, Australia
- Contact:
Re: Mouseover Effects to Change a picture
I find there is a delay with the JCE mouseover. I am struggling to get it working with Javascript too.. if anyone could do an example from go to wo on how to insert a javascript mouseover effect that'd be great.
my websites: http://www.reflexmedia.com.au and http://www.quotemywheels.com.au
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
The reason for the delay is due to the 2nd image needing to load when you rollover. I you want to cut down on the lag you could put the 2nd image in line with the first and apply a CSS style of "display:none". For example...
If you are going to do it alot, put a CSS style in your style sheet, something like...
Then your img tag would look like
Give that a try.
Code: Select all
<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" /><img src="images/yourpic2.jpg" style="display:none">
Code: Select all
.preload {display:none;}
Code: Select all
<img src="images/yourpic2.jpg" class"preload">
Joel Wires
- dubjohnston
- Joomla! Apprentice
- Posts: 13
- Joined: Fri Aug 21, 2009 2:49 pm
- Location: Melbourne, Australia
- Contact:
Re: Mouseover Effects to Change a picture
hi jdwires,
Mate.. I used the first bit of code.. worked a treat.. the mouseover is coming up much quicker.. Thank you so much for that.
In regards to the second bit of code using a class. Just wondering, where in the code is the non mouseover image ie, yourpic? I can see yourpic2 but how does it know the orig image is yourpic if it is not in the class or in the html?
Appreciate your help.
cheers
dub
Mate.. I used the first bit of code.. worked a treat.. the mouseover is coming up much quicker.. Thank you so much for that.
In regards to the second bit of code using a class. Just wondering, where in the code is the non mouseover image ie, yourpic? I can see yourpic2 but how does it know the orig image is yourpic if it is not in the class or in the html?
Appreciate your help.
cheers
dub
my websites: http://www.reflexmedia.com.au and http://www.quotemywheels.com.au
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
I'll try to break it down for you a bit. This is the image that shows by default.
The onmouseover="this.src='images/yourpic2.jpg';" is just stating what image will replace it.
You can put the 2nd image anywhere since the class says it won't display anywhere. I would reccomend placing it right after the first just for simplicity.
Code: Select all
<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />
You can put the 2nd image anywhere since the class says it won't display anywhere. I would reccomend placing it right after the first just for simplicity.
Joel Wires
-
- Joomla! Apprentice
- Posts: 44
- Joined: Fri Mar 05, 2010 4:47 am
Re: Mouseover Effects to Change a picture
What is "This.src"
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
Javascript works with objects. "This" is literally the object or tag that it is part of. The "src" is the source, in this case relative url.
So, you could look at it this way: when you mouse over the image, it changes the source of the image to images/yourpic2.jpg.
Make sense?
So, you could look at it this way: when you mouse over the image, it changes the source of the image to images/yourpic2.jpg.
Make sense?
Joel Wires
-
- Joomla! Apprentice
- Posts: 44
- Joined: Fri Mar 05, 2010 4:47 am
Re: Mouseover Effects to Change a picture
Yes thank you and I believe I may have figured it out.
My only question now is, how do I make this:
http://myhealthworkout.com/test123.html
Have the mouseover image affects of ... say:
http://www.bestofjoomla.com/component/o ... Itemid,46/ (where it appears in a new window and doesn't destroy my layout).
Thanks for your help.
My only question now is, how do I make this:
http://myhealthworkout.com/test123.html
Have the mouseover image affects of ... say:
http://www.bestofjoomla.com/component/o ... Itemid,46/ (where it appears in a new window and doesn't destroy my layout).
Thanks for your help.
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
Okay, there are some different options, none of which I'm very familiar with, so good luck. Here is a do-it-yourself method:http://www.dynamicdrive.com/dynamicinde ... ooltip.htm or http://www.dyn-web.com/code/tooltips/
But I would look into some joomla extensions.
http://extensions.joomla.org/extensions ... mages/6245
http://extensions.joomla.org/extensions ... mages/6105
Hope one of these helps.
But I would look into some joomla extensions.
http://extensions.joomla.org/extensions ... mages/6245
http://extensions.joomla.org/extensions ... mages/6105
Hope one of these helps.
Joel Wires
-
- Joomla! Apprentice
- Posts: 47
- Joined: Sun Oct 12, 2008 6:45 am
Mouseover Effects for banner component...
hi guys,
I am not sure if this is in correct section, but i am desperate for some help.
I have a client who has paid for ads on my website (joomla 1.5), and when the user clicks on the link it opens in a new window. so i needed clicks and impressions record to provide to the client
So i went and setup the banner in joomla, but the client's ad is that there is one image, when a user moves his/her mouse over the image it changes to another, so i put these codes under the Custom Banner code under the banner component: banner
<a target="_blank" href="http://www........."><img height="100" width="595" src="images/image1.gif" alt="Topic" onmouseout="this.src='images/image2.gif';" onmouseover="this.src='images/image1.gif';" /></a>
this has stopped "Clicks" count of the ad, but the impression is working.
so I am not sure what else i could do? Or what extensions/components i can install to achieve this result.
I have installed google analytics, i do get a report of overall website, but i dont know how to setup one for this link
So thats why i need your help, please help me out here
thanks so much in advance for help and advice.
I am not sure if this is in correct section, but i am desperate for some help.
I have a client who has paid for ads on my website (joomla 1.5), and when the user clicks on the link it opens in a new window. so i needed clicks and impressions record to provide to the client
So i went and setup the banner in joomla, but the client's ad is that there is one image, when a user moves his/her mouse over the image it changes to another, so i put these codes under the Custom Banner code under the banner component: banner
<a target="_blank" href="http://www........."><img height="100" width="595" src="images/image1.gif" alt="Topic" onmouseout="this.src='images/image2.gif';" onmouseover="this.src='images/image1.gif';" /></a>
this has stopped "Clicks" count of the ad, but the impression is working.
so I am not sure what else i could do? Or what extensions/components i can install to achieve this result.
I have installed google analytics, i do get a report of overall website, but i dont know how to setup one for this link
So thats why i need your help, please help me out here
thanks so much in advance for help and advice.
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
Similar issue here for Joomla 1.5. I have a simple table, each cell contains an image, however the top row contains only one cell with a larger image. On mouseover, I would like the top (larger) image to display a larger size image of the cell that is "moused-over". This is an easy task in Dreamweaver, but I don't know how to format this in the JCE. Here is the top 2 rows of code:
<tr>
<td colspan="3" height="271">
<p style="text-align: center;"><img src="images/stories/102_0004.jpg" border="0" width="400" /></p>
<br /></td>
</tr>
<tr>
<td onmouseover="MM_swapImage('main','','images/ren/102_0002.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0002.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/stories/102_0036.jpg',1)">
<p style="text-align: center;"><img src="images/stories/102_0036.jpg" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0035.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0035.JPG" border="0" width="120" /></p>
</td>
</tr>
Assistance would be greatly appreciated.
Reed
<tr>
<td colspan="3" height="271">
<p style="text-align: center;"><img src="images/stories/102_0004.jpg" border="0" width="400" /></p>
<br /></td>
</tr>
<tr>
<td onmouseover="MM_swapImage('main','','images/ren/102_0002.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0002.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/stories/102_0036.jpg',1)">
<p style="text-align: center;"><img src="images/stories/102_0036.jpg" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0035.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0035.JPG" border="0" width="120" /></p>
</td>
</tr>
Assistance would be greatly appreciated.
Reed
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
If possible, please provide a sample that will reduce lag time for the images to load.
Thanks for your consideration.
Thanks for your consideration.
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
Looks like you are just missing the javascript snippet to make the whole thing work. Try this:
Note: I changed the first argument in the MM_SwapImage() function to "mainImage" because there is probably already an id="main" used somewhere else in your template. Also, I added it to the id="mainImage" to the larger image so the javascript can target it.
There shouldn't be any lag time in loading because the images that are being used are already loaded/displayed in the table.
Code: Select all
<script type="text/javascript">
function MM_swapImage(theTargetId, someUnknownVariable, theNewImageUrl, someRandomDigit) {
document.getElementById(theTargetId).src = theNewImageUrl;
}
</script>
<table>
<tr>
<td colspan="3" height="271">
<p style="text-align: center;"><img src="images/stories/102_0004.jpg" border="0" width="400" id="mainImage" /></p>
<br /></td>
</tr>
<tr>
<td onmouseover="MM_swapImage('mainImage','','images/ren/102_0002.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0002.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('mainImage','','images/stories/102_0036.jpg',1)">
<p style="text-align: center;"><img src="images/stories/102_0036.jpg" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('mainImage','','images/ren/102_0035.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0035.JPG" border="0" width="120" /></p>
</td>
</tr>
</table>
Note: I changed the first argument in the MM_SwapImage() function to "mainImage" because there is probably already an id="main" used somewhere else in your template. Also, I added it to the id="mainImage" to the larger image so the javascript can target it.
There shouldn't be any lag time in loading because the images that are being used are already loaded/displayed in the table.
Joel Wires
-
- Joomla! Enthusiast
- Posts: 101
- Joined: Mon Nov 12, 2007 5:43 am
Re: Mouseover Effects to Change a picture
The most simple solution.
This works only if your joomla is using Mootools as the default javascript framework(if you are using jquery please look up jquery documentation and you can find the same solution. It might me the same, but not sure so better to check)
First disable HTML cleanup in your editor as suggested in the previous comments.
Then simply add this code to the module/image.
(replace your pic.jpg and with your image name)
With this solutions you don't need any bloated javascript code or module works great.
This works only if your joomla is using Mootools as the default javascript framework(if you are using jquery please look up jquery documentation and you can find the same solution. It might me the same, but not sure so better to check)
First disable HTML cleanup in your editor as suggested in the previous comments.
Then simply add this code to the module/image.
(replace your pic.jpg and with your image name)
Code: Select all
<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
Thanks for the replies! I have not had a chance to apply these options yet.
@ qwan: Mootools is Joomla 1.5's default framework if we are not using jquery, correct? Also, I am trying to swap the main image in the first cell that covers 3 columns ^^^^. Do I apply the image tag you provided to the images that are being swapped (I have 9 images in 3 rows below that I want to swap out the top image) or do I apply this to the main image tag in the first row?
Apologies if I have confused anyone.
@ qwan: Mootools is Joomla 1.5's default framework if we are not using jquery, correct? Also, I am trying to swap the main image in the first cell that covers 3 columns ^^^^. Do I apply the image tag you provided to the images that are being swapped (I have 9 images in 3 rows below that I want to swap out the top image) or do I apply this to the main image tag in the first row?
Apologies if I have confused anyone.
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
To do it the way qwam was suggesting would be "simpler" but a bit more code in your image tags.
Just duplicate this with the appropriate image URLs and IDs and you'll be golden.
-Joel
Code: Select all
<img src="images/yourpic.jpg" onmouseover="document.getElementByID('theIDofTheTopImageGoesHere').src='images/yourpic.jpg';" onmouseout="this.src='document.getElementByID('theIDofTheTopImageGoesHere').src='images/theOriginalMainImageURLGoesHere.jpg'" alt="Your Pic" />
-Joel
Joel Wires
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
No luck. I was unable to get the id to 'take' in the img tag, it did however take in the p tag, but there was no mouseover swap when I tested it. I also tried this in a custom html module but with that didn't work either.
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
Just post the code for the table and images here and I throw it together for you in a jiffy.
Joel Wires
-
- Joomla! Enthusiast
- Posts: 101
- Joined: Mon Nov 12, 2007 5:43 am
Re: Mouseover Effects to Change a picture
Yes mootools is the default framework, but some templates may use Jquery.
This is very simple its already working on my site.
You have to just use the code and replace the image name/path with your image.
the suffix 2 is for the mousover image you want
This is very simple its already working on my site.
You have to just use the code and replace the image name/path with your image.
the suffix 2 is for the mousover image you want
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
Code: Select all
<h3>See our recently renovated facility</h3>
<table style="height: 638px;" border="1" width="466">
<tbody>
<tr>
<td colspan="3" height="271">
<p style="text-align: center;"><img src="images/stories/102_0004.jpg" id="main" border="0" width="400" /></p>
<br /></td>
</tr>
<tr>
<td>
<p style="text-align: center;">
<img src="images/ren/102_0002.JPG" onmouseover="this.src='images/stories/102_0004.jpg';" onmouseout="this.src='images/ren/102_0002.JPG'" width="120" alt="rennovations" />
</p>
</td>
<td onmouseover="MM_swapImage('main','','images/stories/102_0036.jpg',1)">
<p style="text-align: center;"><img src="images/stories/102_0036.jpg" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0035.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0035.JPG" border="0" width="120" /></p>
</td>
</tr>
<tr>
<td onmouseover="MM_swapImage('main','','images/ren/102_0007.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0007.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0013.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0013.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0015.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0015.JPG" border="0" width="120" /></p>
</td>
</tr>
<tr>
<td onmouseover="MM_swapImage('main','','images/ren/102_0016.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0016.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0023.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0023.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="MM_swapImage('main','','images/ren/102_0024.JPG',1)">
<p style="text-align: center;"><img src="images/ren/102_0024.JPG" border="0" width="120" /></p>
</td>
</tr>
</tbody>
</table>
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
I did the first thumbnail cell manually inline with the onmouseover/out. But it is a lot cleaner/easier to use the function. If you need help deciphering it let me know.
Code: Select all
<h3>See our recently renovated facility</h3>
<script type="text/javascript">
function swapImage(theTargetId, theNewImageUrl) {
document.getElementById(theTargetId).src = theNewImageUrl;
}
function originalImage(){
var theTargetId = 'main';//The part in the single quotes is the large image ID
var theOriginalImageUrl = 'images/stories/102_0004.jpg'; //this should be the link to the original image
document.getElementById(theTargetId).src = theOriginalImageUrl;
}
</script>
<table style="height: 638px;" border="1" width="466">
<tbody>
<tr>
<td colspan="3" height="271">
<p style="text-align: center;"><img src="images/stories/102_0004.jpg" id="main" border="0" width="400" /></p>
<br /></td>
</tr>
<tr>
<td onmouseover="document.getElementById('main').src='images/ren/102_0002.JPG';" onmouseout="document.getElementById('main').src='images/stories/102_0004.jpg';">
<p style="text-align: center;"><img src="images/ren/102_0002.JPG" width="120" alt="rennovations" /></p>
</td>
<td onmouseover="swapImage('main','images/stories/102_0036.jpg')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/stories/102_0036.jpg" border="0" width="120" /></p>
</td>
<td onmouseover="swapImage('main','images/ren/102_0035.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0035.JPG" border="0" width="120" /></p>
</td>
</tr>
<tr>
<td onmouseover="swapImage('main','images/ren/102_0007.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0007.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="swapImage('main','images/ren/102_0013.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0013.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="swapImage('main','images/ren/102_0015.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0015.JPG" border="0" width="120" /></p>
</td>
</tr>
<tr>
<td onmouseover="swapImage('main','images/ren/102_0016.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0016.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="swapImage('main','images/ren/102_0023.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0023.JPG" border="0" width="120" /></p>
</td>
<td onmouseover="swapImage('main','images/ren/102_0024.JPG')" onmouseout="originalImage();">
<p style="text-align: center;"><img src="images/ren/102_0024.JPG" border="0" width="120" /></p>
</td>
</tr>
</tbody>
</table>
Joel Wires
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
I plugged it in to test it out in the homepage article in the html editor but no luck. Does it need to go in a custom html module?
http://barkncallgroomers.com/ is the url and the table is at the bottom of the page
If you view page source you will notice that there are 2 javascript frameworks in place: Mootools as the default and jquery for the frontpage slideshow..this may be irrelevant but I thought I would bring it to your attention as that might be what is causing the discrepancy...
http://barkncallgroomers.com/ is the url and the table is at the bottom of the page
If you view page source you will notice that there are 2 javascript frameworks in place: Mootools as the default and jquery for the frontpage slideshow..this may be irrelevant but I thought I would bring it to your attention as that might be what is causing the discrepancy...
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
The main thing that wrong is the main top image is missing the id attribute. Make the big image at the top look like this:
Once you add that it should work just fine.
On a completely different note, if you weren't already planning on it, you really need to scale down your images for this thing. The thumbnails and the main images are 4MB+ a piece. They each could/should only be around 50kb-100kb for all the bigger you are using them. They took forever to load on my 3 megabit connection. Just trying to help.
Code: Select all
<img src="images/stories/102_0004.jpg" border="0" width="400" id="main">
On a completely different note, if you weren't already planning on it, you really need to scale down your images for this thing. The thumbnails and the main images are 4MB+ a piece. They each could/should only be around 50kb-100kb for all the bigger you are using them. They took forever to load on my 3 megabit connection. Just trying to help.
Joel Wires