JavaScript - Load An Image Where The Mouse Is

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

Hi all

I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded.

Is there a way to either:

* Use javascript to make it so the image only loads when the link is hovered over?

or

* Allow the rest of the javascript on the page to run before the images are finished loading?

I think i'd prefer the first solution if possible but i'm open to all ideas.

Thanks in advance!

Hi I have created the following page http://kylehouston.com/new/choir_contact.html
I have added JQuery to smoothly fade in the screenshot on this page but on the first load the image gradually loads which misses out on the fade in effect. Is there a way I can load the image invisibly and then fade it in?

Thanks in advance for your advice

Kyle

Hi

I'm an AS3 dev learning Javascript.

I'm currently writing a simple script that loads an image as seen below. I deliberately misspell the file name to test the fail.

Code:

var fileName = "anImageThatDoesntExist.jpg";
var image = new Image();
image.onload = imageLoaded;
try {
	image.src = "images/" + fileName;
} catch( error ) {
	console.log('load error', error.message );
} finally {
	console.log('unable to catch error!')
}
function imageLoaded( event ) {
     console.log('image loaded');
}

When I run this script I was expecting the 'catch' to pick up the error and tell me that the file doesn't exist. The 'catch' statement is ignored and 'finally' is executed.

I would be very grateful if someone could let me know if I'm writing the try/catch incorrectly or whether it doesn't work in this way when loading an image.

Many thanks in advance....

Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html

Where the images on the page fade in as the user scrolls down.
I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html

Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome.

Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!)

Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll.

Any ideas, or if there is better code out there?

Thanks in advance!!

How can I make it to where an image will load in the corner of a website?

Specifically, I have part of a template I want all people to see, however, some people either get it cut off or not shown at all because of their resolution.

Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this:

http://piscesmike.com/Pages/recipes/onions.html

The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob!

I used DrDOS's solution from http://www.codingforums.com/showpost...17&postcount=8

and modyfied it a bit so I have 2 images, first without and 2nd with a link to other page.

It works just fine in FF but in Chrome and in IE it shows just 2nd image. On place where first image shall be it's just blank white space. I have javascript enabled in all browsers, btw.

Here's a code in head:
Code:

<script type="text/javascript">

function loadImg()

	{

	document.getElementById("loadimg").innerHTML="<img src=\"logo2.png\"";

	}
	
	
	function loadImg2()

	{

	document.getElementById("loadimg2").innerHTML="<a href=\"http://site.com\"><img src=\"logo2.png\"</a>";

	}

</script>

And here's body part:
Code:

<div class="bottleft">

<div id="loadimg"></div>

<script type="text/javascript">var myimg = setTimeout("loadImg();",5000);</script>

  </div>
  
  <div class="bottright">
	
	<div id="loadimg2"></div>

<script type="text/javascript">var myimg = setTimeout("loadImg2();",5000);</script>

  </div>

I'm trying to figure out this whole day but just can't see where I am making a mistake?

Hello,

Can anyone figure out whats going on with this page and i need to finish the site by this evening? It is a wordpress site. the background image is shifting to the right on IE7 after the page loads on only the homepage. I think its the slider but im not sure

www.grapevineoutreach.org

thanks

It must be a simple thing...

I am trying to change an image source on page load depending on the contents of a cookie:

Code:

function goVisited(cookiename,img_name,img_src) {
var visited = readCookie(cookiename);
if (visited == "1"){
//alert("visited!");
document[img_name].src=img_src;
}}

<img onload="goVisited('main1','Introduction','img/Yellow.gif');" name="Introduction" border="0" src="img/Green.gif" width="250" height="18">

I need the page to check the cookie "main1" and if its value is 1, then change the image src from Green.gif to Yellow.gif.

It almost works, but I get a stack overflow.