JavaScript - Mouse Over Effect

is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position

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

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>

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 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";
				}

I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation?

I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas?

Thank you,

Dustin

I want to add the the faded effect to the slide pics that I make them change by timer and I don't know how to add the faded effect and make it work on IE and Firefox.

Hi friends,

Im new with JS.
How to make the roll over effect in JS.
An image, on roll over, the big size of the same image needs to appear.

regards

anoop

I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

Carson
www.carsonkahn.com

I am using ASP.NET and AJAX here.

basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example:

<< prev [image1] [image2] [image3] [image4] Next >>

<< prev [image5] [image6] [image7] [image8] Next >>


so when the user presses next or previous, it will SLIDE to the left/right.

the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev.

how can I go about doing this type of effect?

Hey guys, I'm new to the forum and thought I should sign up to learn a little more.

I am trying to work on a lightbox for my personal portfolio site which opens up numerous images in one lightbox that you can scroll through. However, I want thumbnails below the main image too. The following link shows exactly what I mean, just click on one of the images...

http://www.weareunit.com/index.php?p=3D

Thanks

Quick question,

I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image.

How would I get that effect?

Thanks!!!

Hi there,

I am looking for a javascript code for an html file. I am looking for something where when you put your mouse over the text, a drop down list will come down. If anyone can point me in the right direction that would be helpful.

An example would be on a site like www.espn.com - when you put your mouse over NBA the following options appear: NBA Home, Scores, Schedule, Teams, etc.

Hey everyone,

I've got a section on my website where I have 2 images placed on top of each other when the user rollovers the image, the image ontop fades out revealing the image underneath. You can then click on this underneath image to open a fancybox window and scroll through pictures. My problem is that sometimes the fade out gets 'stuck' and after closing the fancybox window, the image reamins half faded out etc and the rollover doesn't work anymore.

here's my code:

Code:

<style type="text/css" media="screen">
   .js #animators { position: relative; height: 100px}
   .js #animators div.container { position: absolute; left: 0; top: 0

</style>

  <script type="text/javascript">

    document.documentElement.className += " js"; // Add js class to the HTML element
    $(function(){
      var $containers = $("#animators > div").hide();
	  
      $('#show').show();

      $('tr td a.c').each(function(i,el){
        var idx = i;
        $(this).click(function(e){
          var $target = $containers.filter(':eq(' + idx + ')');
          if($containers.filter(':visible').not($target).length){
            $containers.filter(':visible').fadeOut();
          }
          $target.not(':visible').fadeIn();
          e.preventDefault();
        })
      })
    });
</script>

<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
	    			<div class="visible-image">
						<img src="images/illustrationslabel.jpg" />
					</div> 
        			<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
        			</div>
   				</div>

mc

I want to mouse over a symbol (or coordinate) on an image and have a photograph appear of the real life item. Is there a code that could be used for doing this?

Any help appreciated.