Rollover images help needed

Garry Edwards

Garry Edwards

Moderator
Messages
13,475
Name
Garry Edwards
Edit My Images
No
I'm trying to create rollover images like this example, of oscilloscope traces, near to the bottom of the page


Maybe I'm missing something obvious here - probably am - and would appreciate any advice.

This is the code that I generated/lifted. The various images are on the server.

<table width="370" cellpadding="0" class="widget-rollover">
<tbody>
<th scope="col"></th>
<th scope="col">SuperFast300</th>
</tr>

<tr>
<th scope="col"></th>
<th scope="col"> SF300</th>
</tr>
<tr>
<th scope="row">300Ws</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/static.jpg" alt="Disk1" /></td>
</tr>
<tr>
<th scope="row">150Ws</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/sf300_5.jpg" alt="Disk2" /></td>
</tr>
<tr>
<th scope="row">62.5Ws</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/sf300_5.jpg" alt="Disk4" /></td>
</tr>
<tr>
<th scope="row">31.25Ws</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/sf300_5.jpg" alt="Disk8" /></td>
</tr>
<tr>
<th scope="row">16Ws</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/sf300_5.jpg" alt="Disk16" /></td>
</tr>
<tr>
<th scope="row">8Ws</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/sf300_5.jpg" alt="Disk32" /></td>
</tr>
<tr>
<th scope="row">7.8W</th>
<td> <img width="300" height="130" src="http://www.lencarta.com/sf300_5.jpg" alt="Disk64" /></td>
</tr>
<tbody>
</table>
Click to expand...
 
looks like that page uses a script "class="widget-rollover""

part of the jquery function.

Code: 
<!-- rollover widget -->
		<link rel="stylesheet" href="scripts/jQuery.rgbSlide.css" />
		<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="scripts/jQuery.rgbSlide.js?200908201313"></script>
		<script type="text/javascript">
			//<![CDATA[
			$(document).ready(function() {
			$('.' + jQuery.fn.rgbSlide.DefaultClass).rgbSlide({});
			});
			//]]>
		</script>
 
Yes, I need to do something very similar to the example, with a number of different images
 
Garry Edwards said:
Yes, I need to do something very similar to the example, with a number of different images
Click to expand...

Easiest thing, if doing this yourself, is to use Firefox, and right click on the oscilloscope image, and select Inspect Element.

Uncollapse the nested lines of code, then select them all for copying.
You'll need to save the JQuery.rgbSlide.css and add that to your folder.
When saving the code, you need to start with the line referencing the runtime mouseover.
Insert that wherever you want in your main body, and if you've done it right, it should look like the example.
 
The rollover on that site doesn't work on the version of Firefox I'm using at work (on my lunch).

The ones on my blog are simple html and will work from anywhere. Very simple to achieve.
 
Unfortunately it's beyond me, I'm too thick.
So I've asked the webmaster techie guy to sort it out for me.
But thanks for the advice anyway.
 
mine's really simple, honest (even I did it - from a web tutorial).
img onmouseover="this.src=' http://www.philvaughanphotography.co.uk/rolloverimageurl.jpg'" onmouseout="this.src='http://www.philvaughanphotography.co.uk/baseimageurl.jpg'" alt="" src=" http://www.baseimageurl.jpg " /></a></p
 
Yes, I can do that where there is just one mouseover image, but there are several needed
 
You must log in or register to reply here.
Back
Top