JavaScript - Mouse Over/change Image Help

Hi all,
I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason.


html:
Code:

<div class="service_box box1" id="service_box1">
    <a href="#" id="box1_trigger">
        <h3>bla bla</h3>
        <p>bla bla bla bla bla</p>
    </a>
</div>

javascript:
Code:

<script type="text/javascript">
$(document).ready(function() {
	$("#box1_trigger").hover(
		function() {
			$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");    
		},
		function() {
			$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");  
		}
	);
});
</script>

css:
Code:

#service_box1{
	width:318px; height:282px;
	float:left;
	background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
	width:100%; height:100%;
	float:left;
	display:block;	
}

Could you help me fix this please??

Hi,
Am trying to change both, the background color and the mouse pointer to hand on the mouseover event. Am using this to change the background color:
Code:

onMouseover="this.bgColor='#55FF55'"onMouseout="this.bgColor='#AEFFAE'"

How and i add the "change pointer to hand" on this as well?
Thanks

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

How to mouse over the image then the words will appear below it?

Hello everyone, I'm looking for a javascript script that will load a small image where the mouse is, then it would go away after a couple seconds.

Thanks a bunch!

area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ??


Plz suggest me something ...........

Samaiya

Example of my problem:
HERE

The code is derived from a site offering some advice for javascript:
HERE

The example of mine tries to use an image as hyperlink... and use mouse events for certain actions.

Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links.

I've got it to work for one row in the table I'm using to attempt some kind of formatting.

I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question.

The idea is for viewer to see three red dots at the front of each item being offered.

Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?)

About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that.

What I've done works for one list item... but fails for more than one.

The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one.

I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1.
I've only posted one row's worth but the next row uses the same code with the variables incremented.

And hopefully someone will look at the actual example (URL given above) and see the full code.

The basic code I've put here for convience.:

Code:

<table>
<tr>
<td valign=top >
<A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" 
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton_0" src="./3dots.png" border="0" 
alt="javascript button"></A> some nice video 
<SCRIPT language="JavaScript">
var myimgobj_0 = document.images["jsbutton_0"];

function changeImage()
{
document.images["jsbutton_0"].src= "./aro1r-mo.png";
return true;
}
function changeImageBack() 
{
 document.images["jsbutton_0"].src = "./3dots.png";
 return true;
}
function handleMDown()
{
	document.images["jsbutton_0"].src = "./checks.png";
	return true;
}
function handleMUp()
{
        document.images["jsbutton_0"].src = "./checks.png";
	return true;
}
</SCRIPT>
</tr>
</td>

Hi,

I am new here, I am trying to find solution for one problem with my new web page, I want to use amazing effect -by mouse draging or swipe on the certain image which should launch animation effect (something like image rotating) -set of images should run dynamicaly and so simulate fluid effect (movie). For a better Idea what I need it can be for example something as physical lever switch with spring when this switch is slightly tilted spring complete this action and switch is flipped to other state. Or another example image of book should be on web and when someone drag and pull page this should independently continue and complete action - turn to new page.

So my question .. is something like that possible with javascript if yes can You please point me where I have look or how this can be done, each advice will be valuable for me or maybe javascript isnt right choice for this can You advise me?

THANKS

hi everyone,

firstly to call myself a noob would be inflating my ego. I have done one project in javascript so far and have had no schooling on the topic, however I have learned quite a lot in the last few months from this thing called the 'internet'. So far I managed to make an html image map that has various tooltips which will appear onmouseover, and the tooltip disappears onmouseout. Each point of coords that i have defined has a hyperlink to a different page on the internet. It works just like i wanted it to and i couldn't be happier, that is, when i'm using a mouse...

When i am using a touchscreen device it is a different story. specifically i'm trying to port my html page to android as i figured it would be easy with the android sdk and webview (it was, but read on). What i found when i used the 'app' on my phone was that onmouseover works when you touch the screen, however it also registers as a click, so pop goes the tooltip, and i'm whisked away to my webpage. not the desired result.

Ideally I would like to hold down the screen for 3 seconds and then the hyperlink would activate, but i decided that just getting the thing functional would suffice for the time beaing so i tried to include some 'ondblclick' that would trigger a document.location. This worked fine on a web browser again, but had no result on the touchscreen. I decided to abandon this half step because I have read that ondblclick doesn't work in an image map and it isn't my intended result anyway.

I have found a lot of javascript and jquery samples that emulate the onHold event that i'm trying to achieve, both on this forum and all over the internet, however these samples are overly complex and are focused on looping an action, such as incrementally increasing a value or zooming or whatever. I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds.

anybody want to trade some help for a thankyou?

Hi all,

First post here in a long time, I'm finally getting round to sorting out a portfolio website.

I have a rollover image which has a mouse over and down action and a table cell which has a mouse over and down action which swaps the assigned css class.

What i need to happen is when i mouse over the table cell containing the rollover image the table cell below switches the style assigned to it.

I have it working the other way around so when you mouse over the bottom cell the image in the top cell swaps, see he
http://onebitrocket.co.uk/swapimageandtext.html

I'm basically looking for an action similar to a swap image in a cell which has it's ID defined

onmouseover="MM_swapImage('Image4','','images/thumbs/th04.jpg',1)"

so onmouseover="MM_swapstyle...

Any help would be great

Thanks

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

want to get selected text and image values .Since there is an randomly changed text and image on my page.I used window.getSelection() but this will return only selected text values not images ..so please guide me to solve this problem.

In homePage(1 photo) and in Gallery(9 photos) at
http://www.pafos-wedding.com/
I setup mouse rollover functionality > bigger photo...but bigger image appear below smaller...what to do appear next to smaller, so top side of both photos are on same line?

Hi everyone. Can anyone help me , i need to make a onmouseover function ,
when u go with mouse on the left small image it automatically opens the large image in the right, can anyone help me with this ???

Here is my code for two tab images.

Code:

    <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
    <a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>

I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ?

Its basically to show which tab is active, one image is lighter then the other.


Can anyone help ?