CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Onmouseover Image/Text Glide (http://www.codingforums.com/showthread.php?t=217361)

Nightshade14 02-03-2011 01:39 PM

Onmouseover Image/Text Glide
 
Hello all,

I'm new to this forum so please forgive me if I make mistakes and feel free to point them out.

I'm a beginner when it comes to javascript, but would like to learn. I have been building a website that I would like to put an interactive feature on.

This is the code that I currently have:

Code:

<a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_pink.jpg')" onmouseover="scroll_up();"><img class="pinkico" hspace="3" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_pink_icon.jpg">

<a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_yellow.jpg')"><img class="yellowico" hspace="4" onMouseOver="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_yellow_icon.jpg">

<a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_white.jpg')"><img class="whiteico" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_white_icon.jpg" ></a>

I would like to have these images scroll together at the same time in accordance with the mouse movement. So when the mouse is just hovering over one of these images or elsewhere on my page they will stay still, but when the mouse is hovered over the left or the right hand side the images move in that direction? So if the mouse is hovering over to the left side the images will start to slide left and if the mouse is hovering over the right side the images will start to slide right.

I have tried to do some research on this for myself but have only been able to locate this web page to explain what I am looking for:
Link 1 - The type of effect I'm looking for is demonstrated by their first example, underneath the horizontal scrolling demo header.

I have no idea how to achieve this code though and have failed to find any answers that I understand on the website. Adding two little arrow images for the mouseover and mouseout effect to happen would not be a problem, but I do not understand how to go about this.

Hope this is ok,

Thank you for reading :),

Nightshade14

wanyxspe 12-12-2011 11:24 PM

I think FlowSlider plugin may help you.


All times are GMT +1. The time now is 02:16 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.