Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-03-2011, 01:39 PM   PM User | #1
Nightshade14
New Coder

 
Join Date: Feb 2011
Location: Manchester
Posts: 15
Thanks: 1
Thanked 0 Times in 0 Posts
Nightshade14 is an unknown quantity at this point
Question 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
Nightshade14 is offline   Reply With Quote
Old 12-12-2011, 11:24 PM   PM User | #2
wanyxspe
New to the CF scene

 
Join Date: Dec 2011
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
wanyxspe is an unknown quantity at this point
I think FlowSlider plugin may help you.
wanyxspe is offline   Reply With Quote
Reply

Bookmarks

Tags
glide, image, onmouseout, onmouseover, text

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:35 PM.


Advertisement
Log in to turn off these ads.