JavaScript - Mouse Over Code Not Swapping Image On Mouse Over

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

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

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 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!

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

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?

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, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.

I wrote this code for 1 image, and it is working perfectly fine:

Code:

function swapImage()

				{
					document.getElementById("linkedin").src = "images/glinkedin.png";
				}

function restoreImage()

				{
					document.getElementById("linkedin").src = "images/linkedin.png";
				}

the problem starts when I want to use this code for 4 images, can anyone correct it please:

Code:

function swapImage()

				{
					document.getElementById("linkedin").src = "images/glinkedin.png";
				}


				{
					document.getElementById("facebook").src = "images/gfacebook.png";
				}


				{
					document.getElementById("google").src = "images/ggoogle.png";
				}


				{
					document.getElementById("twitter").src = "images/gtwitter.png";
				}

function restoreImage()

				{
					document.getElementById("linkedin").src = "images/linkedin.png";
				}

				{
					document.getElementById("facebook").src = "images/facebook.png";
				}

				{
					document.getElementById("google").src = "images/google.png";
				}

				{
					document.getElementById("twitter").src = "images/twitter.png";
				}

Hi frds ,

I have requirement that when ever I hover the mouse on image then the mouse pointer should be hand symbol ,

So for that I have written the code as

<a style="cursor: hand;"> <img ....?</a>

in IE it works fine but in Firefox it doesnot works

Note :
I have already used as <a href="#"> <img ....></a> but due to this , the screen is jumping when we click on image

Thanks
Raj

Hi,

Does anyone knows how to use this effect using javascript?

http://www.modonline.com/

Really appreciate if someone can help me.

Thank You,
Nadun

background:

display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked.

current code:
i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck.
Code:

<script type="text/javascript">
   var el;
   var cpic; //elementId via mouse position
window.onload=function() {
   el=document.getElementById('pic1');
   el.onmouseover=function() {
   changeText('hide','show')
 }
   
 }
function changeText(cl1,cl2) {
   document.getElementById('span1').className=cl1;
   document.getElementById('span2').className=cl2;
}
</script>

so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed.

on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4".
i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed.

one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked.

any direction / suggestions would be a big help.
regards,
Fatmann66

Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript???
pls help...

I have a pop-up message box, that I'd like help changing to a mouse-over message box.

Any help would be appreciated. Thanks

Code:

<style>
.msg { display:block; position:absolute; top:300px;
left:300px; width:350px; background-color:#eeeeff; border-style:solid;
border-width:1px; padding:15px 20px 5px 20px; }
.msgclose { text-decoration:none; font-size:0.9em;
font-variant:small-caps; margin-top:10px; }
</style>

<div id="popupMsg" class="msg">
You must read this message.<br>
This is a test message box <br />
<div style="width:100%; text-align:right;">

<a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block';
return false;"><font color="#800000">Close Window</font></a>
</div>