Mouseover Effects to Change a picture

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
mbruno
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Wed May 27, 2009 12:12 am

Mouseover Effects to Change a picture

Post by mbruno » Wed May 27, 2009 12:19 am

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!
Matt Bruno

User avatar
jdaum
Joomla! Intern
Joomla! Intern
Posts: 83
Joined: Sat Sep 03, 2005 5:10 am
Location: Auckland, NZ
Contact:

Re: Mouseover Effects to Change a picture

Post by jdaum » Fri May 29, 2009 4:59 am

You could try to use the built in mouseover functionality in JCE editor.

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

mbruno
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Wed May 27, 2009 12:12 am

Re: Mouseover Effects to Change a picture

Post by mbruno » Fri May 29, 2009 5:53 pm

JCE editor? Where's that located?
Matt Bruno

User avatar
jdaum
Joomla! Intern
Joomla! Intern
Posts: 83
Joined: Sat Sep 03, 2005 5:10 am
Location: Auckland, NZ
Contact:

Re: Mouseover Effects to Change a picture

Post by jdaum » Fri May 29, 2009 8:32 pm

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

mbruno
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Wed May 27, 2009 12:12 am

Re: Mouseover Effects to Change a picture

Post by mbruno » Fri May 29, 2009 8:50 pm

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

lonerunner
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Sat Jul 11, 2009 4:17 pm

Re: Mouseover Effects to Change a picture

Post by lonerunner » Thu Jul 30, 2009 2:02 pm

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...

chrisfireems
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Thu Apr 19, 2007 6:02 pm
Location: Pennsylvania

Re: Mouseover Effects to Change a picture

Post by chrisfireems » Mon Aug 10, 2009 2:29 pm

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

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Wed Aug 12, 2009 3:19 am

If you want to put the code in manually... here you go. format you <img> something like this.

Code: Select all

<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />


Hope this helps.

-Joel

User avatar
dubjohnston
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Aug 21, 2009 2:49 pm
Location: Melbourne, Australia
Contact:

Re: Mouseover Effects to Change a picture

Post by dubjohnston » Mon Mar 22, 2010 8:29 am

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.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Mon Mar 22, 2010 12:07 pm

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...

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">

If you are going to do it alot, put a CSS style in your style sheet, something like...

Code: Select all

.preload {display:none;}

Then your img tag would look like

Code: Select all

<img src="images/yourpic2.jpg" class"preload">

Give that a try.

User avatar
dubjohnston
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Aug 21, 2009 2:49 pm
Location: Melbourne, Australia
Contact:

Re: Mouseover Effects to Change a picture

Post by dubjohnston » Mon Mar 22, 2010 9:29 pm

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

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Mon Mar 22, 2010 11:32 pm

I'll try to break it down for you a bit. This is the image that shows by default.

Code: Select all

<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />

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.

kingmalka
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Fri Mar 05, 2010 4:47 am

Re: Mouseover Effects to Change a picture

Post by kingmalka » Thu May 13, 2010 11:45 pm

What is "This.src"

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Fri May 14, 2010 12:50 am

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?

kingmalka
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Fri Mar 05, 2010 4:47 am

Re: Mouseover Effects to Change a picture

Post by kingmalka » Fri May 14, 2010 1:06 am

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.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Fri May 14, 2010 2:07 am

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/dynamicindex4/imagetooltip.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.

rgedit
Joomla! Apprentice
Joomla! Apprentice
Posts: 47
Joined: Sun Oct 12, 2008 6:45 am

Mouseover Effects for banner component...

Post by rgedit » Fri Jul 02, 2010 2:13 am

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.

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Thu Jun 21, 2012 3:06 pm

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

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Thu Jun 21, 2012 3:23 pm

If possible, please provide a sample that will reduce lag time for the images to load.

Thanks for your consideration.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Thu Jun 21, 2012 3:30 pm

Looks like you are just missing the javascript snippet to make the whole thing work. Try this:

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.

qwan
Joomla! Intern
Joomla! Intern
Posts: 97
Joined: Mon Nov 12, 2007 5:43 am

Re: Mouseover Effects to Change a picture

Post by qwan » Fri Jun 22, 2012 1:03 pm

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)

Code: Select all

<img src="images/yourpic.jpg" onmouseover="this.src='images/yourpic2.jpg';" onmouseout="this.src='images/yourpic.jpg'" alt="Your Pic" />


With this solutions you don't need any bloated javascript code or module works great.

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Mon Jul 02, 2012 2:25 pm

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.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Mon Jul 02, 2012 3:02 pm

To do it the way qwam was suggesting would be "simpler" but a bit more code in your image tags.

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" />


Just duplicate this with the appropriate image URLs and IDs and you'll be golden.

-Joel

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Mon Jul 02, 2012 9:47 pm

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.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Mon Jul 02, 2012 11:45 pm

Just post the code for the table and images here and I throw it together for you in a jiffy.

qwan
Joomla! Intern
Joomla! Intern
Posts: 97
Joined: Mon Nov 12, 2007 5:43 am

Re: Mouseover Effects to Change a picture

Post by qwan » Tue Jul 03, 2012 3:11 pm

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

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Tue Jul 03, 2012 4:00 pm

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>

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Tue Jul 03, 2012 4:41 pm

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>

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Tue Jul 03, 2012 6:30 pm

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...

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 93
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Wed Jul 04, 2012 2:59 am

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:

Code: Select all

<img src="images/stories/102_0004.jpg" border="0" width="400" id="main">

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. :)


Locked

Return to “Joomla! 1.5 Coding”