Roll Over State Content Slider

[designastronaut]

Content Slider

Original Script:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

Hi,

I'm looking for a way to keep the hover/rollover on when the image is clicked. Any help would be greatly appreciated.

Here's the test version: http://micketong.com/TEMP/ERICH/


and the Code.


<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
<img src="images/IMG1.jpg" />
</div>

<div class="contentdiv">
<img src="images/IMG2.jpg" />
</div>

<div class="contentdiv">
<img src="images/IMG3.jpg" />
</div>

<div class="contentdiv">
<img src="images/IMG4.jpg" />
</div>

<div class="contentdiv">
<img src="images/IMG5.jpg" />
</div>

<div class="contentdiv">
<img src="images/IMG6.jpg" />
</div>

<div class="contentdiv">
<img src="images/IMG7.jpg" />
</div>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('motorcycle','','images/btn_moto_roll.gif',1)"><img src="images/btn_moto.gif" alt="Motorcycle" name="motorcycle" width="138" height="100" border="0" id="motorcycle" /></a>
<a href="#" class="toc anotherclass" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Boat','','images/btn_boat_roll.gif',1)"><img src="images/btn_boat.gif" alt="Boat" name="Boat" width="132" height="100" border="0" id="Boat" /></a>
<a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Auto','','images/btn_car_roll.gif',1)"><img src="images/btn_car.gif" alt="Auto" name="Auto" width="142" height="100" border="0" id="Auto" /></a>
<a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/btn_home_roll.gif',1)"><img src="images/btn_home.gif" alt="Home" name="Home" width="132" height="100" border="0" id="Home" /></a>
<a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Recreational','','images/btn_rec_roll.gif',1)"><img src="images/btn_rec.gif" alt="Recreational" name="Recreational" width="146" height="100" border="0" id="Recreational" /></a>
<a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Life','','images/btn_life_roll.gif',1)"><img src="images/btn_life.gif" alt="Life" name="Life" width="109" height="100" border="0" id="Life" /></a>
<a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Business','','images/btn_bus_roll.gif',1)"><img src="images/btn_bus.gif" alt="Business" name="Business" width="143" height="100" border="0" id="Business" /></a> </div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>
<!--GLIDER Pagination DIV END-->

[jscheuer1]

That's actually more under the control of the four MM_ functions on the page. But we can use the selected class that the Content Slider adds to each toc link when it's content is being displayed in the Slider as an aid to modify what happens so as to get the desired result.


To ensure that they're available when needed, it would be a good idea to move the preload of the rollover images to before the load event of the body.


The script credit for the Content Slider belongs within the external script tag for it.


'Not Character Data' comment tokens will eliminate the validation errors (they were there before along with a number of others for the markup, but those others are another topic) that arise from the MM code being parsed by the validator as HTML code.


A test may be added to the MM_swapImgRestore() function to make sure it doesn't remove the highlight rollover image from the toc if it's selected.


A script may be added to the end of the page to tie this all together so that the selected images will lose their rollover highlight when another is selected, and the current selected toc image will show it's rollover state as the page loads.


Here's a copy of the page with all of the above mentioned changes:

4390

[designastronaut]

Thanks John for the feed back and help! Let me get into this and see if I can make it work.