JavaScript - Need Help On Simple Mouseover

Good morning all,

I am trying to write a JavaScript that performs the following action:
When I roll my mouse over on a paragraph with a

Code:

<p class="hover-target"> Paragraph goes here</p>

It will do a reverse video of it. Currently the web page is in white background, black text. So when the mouse rolls over that particular paragraph it will be a black background, white text for that paragraph only.

The JavaScript I wrote is:

Code:

  {
    Core.start
    (
      ( function()
        {
          function mouseoverListener(evt)
		  {
			evt = evt ? evt : window.event;
			core.addClass (this, " over");
		  }
	  function mouseoutListener(evt)
		{
			evt = evt ? evt : window.event;
			core.removeClass (this, " over");
		 }
          return {
            init: function()
            {
              var allElements = document.getElementsByTagName('*');
	      for (var i = 0; i < allElements.length; i++);
		{
			if (core.hasClass(allElements[i], "hover-target"))
			core.addEventListener(allElements[i], 'mouseover', mouseoverListener);
			core.addEventListener(allElements[i], 'mouseout', mouseoutListener);
            }
            }
          };
        }
      )()
    );
  }

The HTML document has the right path to the scripts (core. js and the rollover.js) as well as the stylesheet (index_style.css). Also, the CSS stylesheet code is:

Code:

.over{
    color:white;
    background:black;
   }

There is more to this stylesheet but I am only highlighting the rollover style. Am I missing something from my code? Thanks for your time.

Hello,

I've got a strange image with mouse overs on a menu.


my code;
Code:

function SwapImage(strName,strImage){
	ImageFlip= new Image()
	ImageFlip.src = "images/" + strImage;
	var strImageOn = document.getElementById(strName);
	strImageOn.src = ImageFlip.src; return true;
}

<table border='0' cellpadding='5' cellspacing='5'>

<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem1','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem1','MouseOut.png');\"><a href='/'><img src='images/home_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem1' /></td>
</tr>

<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem2','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem2','MouseOut.png');\"><a href='/artwork.php'><img src='images/artwork_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem2' /></td>
</tr>

<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem3','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem3','MouseOut.png');\"><a href='/artists.php'><img src='images/artists_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem3' /></td>
</tr>

<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem4','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem4','MouseOut.png');\"><a href='/about.php'><img src='images/about_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem4' /></td>
</tr>

<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem5','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem5','MouseOut.png');\"><a href='/links.php'><img src='images/links_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem5' /></td>
</tr>

</table>

this is in a php page, thats the reason for the extra slashes/espaces.
for some reason, only the last row of the menu works with the mouse over, maybe I'm missing something, but it seems like it should all work.

any ideas would be really helpful.

cheers,
-Ken

I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers.

I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name.

And now i'm trying to learn how mask the various url/links in the menus.

As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain.

Hope that all made some sense

Hey guys, I need some help. I have divs placed in a html document, and what I need to do is have a sound play when a person is to hover their mouse over the,. I used this code that I've butchered together from researching on the internet, but it just isn't working. The sound plays automatically as soon as the site loads. Can you please help me? Here is my code:

Code:

<html>
<head>
<script>
function EvalSound(soundobj) {
  var thissound= eval("document."+soundobj);
  thissound.Play();
}
</script>

<embed src="C.mp3" autostart=false width=0 height=0 name="C"
enablejavascript="true">
<embed src="D.mp3" autostart=false width=0 height=0 name="D"
enablejavascript="true">

</head>
<link rel="stylesheet" type="text/css" href="NavTest.css">

<div id=red alt="#" onMouseOver="EvalSound('C')"></div>
<div id=blue alt="#" onMouseOver="EvalSound('D')"></div>
</html>

Thank you! [:

Sorry, maybe I should also mention that my knowledge of Javascript is NONE! :|

Hi there.

I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on.

I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term.

Thanks.

Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh.

The following piece of codes work like this:

When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes.

<html>
<head>

<script type="text/javascript">
function over(e)
{
if(e.toElement){
if(e.toElement.tagName.toLowerCase() == "input"){
e.toElement.value="IE New";
}
}

}


function out(event)
{

if (event.srcElement){
if(event.srcElement.tagName.toLowerCase() == "input"){
event.srcElement.style.background= "green";
}
}

}


</script>
</head>

<body>
<div id="1">aaaaaaaaaaaaaaaaaa </div>
<input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" />

</body>

</html>


This sequence works fine, until the following case:

First let's see the direction of the button:

(left) <--------> BUTTON <--------> (right)

Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed.

Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered.

What caused this?

Thanks

Scott

Hi,

I have a series of images, anchored linked together to simulate a tour. I decided it would be better if rather than clicking it was like a smooth simulation so i added onmousever to the anchor links. this was a smooth transistion but entirely too fast.

is there a way with javascript, to slow down the onmouseover events? i have the images on the same page, just shoved down the page by using pagebreak html, so that they load when the page loads and therefore don't slow down the effect. (they are large images). i can't use the script that smoothly scrolls between anchor links, because it scrolls down the page to the next image, which ruins the effect. the images are increasingly larger pictures of the same thing, so the effect is somewhat like moving thru 3d space.

i need the onmouseover to FIRE but move slower than normal onmouseover before firing again. repeat.

here's an example
http://www.thelivingmoon.com/undomie...rmouse.html#22

i mean the entire sequence is done before the person even realizes what just happened

I have a banner but it keeps rotating even when you mouse over it.

Is there a simple code I can add to the code below so that the banner will paused when you mouse over it?

Thanks!

Jeremy

Quote:
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();


/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();

//prepend the new image
$ps_preview_wrapper.prepend($newImage);

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}

function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();

//prepend the new image
$ps_image_wrapper.prepend($newImage);

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);

e.preventDefault();
}

function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
$links.eq(current+1).trigger('click');
if(cache == (current+':'+total_images))
$links.eq(0).trigger('click');

}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
setInterval( function(){
$('.ps_next').click();
},4000 );

Hey guys,

So I got my autoscrolling javascript working, but I need to make it pause on mouseover. How do I accomplish that with my javascript code?

Code:

<script type="text/javascript">

var defaultStep=1;
var step=defaultStep;
var timer;

function scrollDiv(id,s){
var obj=document.getElementById(id);
var iScrollTop = obj.scrollTop;
step=s||step;
if (iScrollTop == 0){
step=defaultStep;
}
else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){
step=-defaultStep;
}
clearTimeout(timer);
obj.scrollTop+=step;
timer=setTimeout(function(){ scrollDiv(id); },100)
}


function stopMe(){
clearTimeout(timer);
}

function scrollMe(id){
scrollDiv(id)
}



</script>

Thanks!

I'm trying to create a jquery nav that will show up in place of the existing paragraph or div with a ul, then on the mouse out replace the existing paragraph. I'm not not too experienced with javascript, so I'm hoping it's just a simple and easy fix.

This is what I have so far. I managed to get it to work, somewhat, but the paragraph shows up if you mouse off the main button over the ul. And for some reason it doesn't always show the menu on the mouse over, is picky about which ones it does.

Code:

$(document).ready(function(){ 
	var showMenu = function ( el, menu, p )
	{
		var o = $(el).offset();
		$(menu).clearQueue();
		$(menu).css( { "left":o.left-122 + "px", "top":o.top+40 + "px", "z-index":100  } );
		$(menu).stop().fadeIn(1);
		$(menu).mouseover( function () {
			$(this).clearQueue();
			$(this).stop().fadeIn(1);
		});
		$(menu).mouseout( function () {
			$(this).clearQueue();
			$(this).stop().fadeOut(1);
		});
		$(el).bind( 'mouseout', {target:menu}, function(e) {
			$(e.data.target).stop().fadeOut(1);
		});
		$(el).bind( 'mouseover', function() {
			$(p).fadeOut(1);
		});
		$(el).bind( 'mouseout', function() {
			$(p).fadeIn(1);
		});	
	}
	var n=0;
	$(document).ready(function() {
		$('a#learn').mouseover( function() { showMenu($(this),$('div.subnavlearn'),$('p.learn')); });
		$('a#connect').mouseover( function() { showMenu($(this),$('div.subnavconnect'),$('p.connect')); });
		$('a#act').mouseover( function() { showMenu($(this),$('div.subnavact'),$('p.act')); });
	});
});

see it live he http://dev.joshuadnelson.com/clients/postgrowth/

Hi, thanks for looking. I'm new to JS and am trying to use an image several times on the same page, having each image show rollover behavior. The rollover code works for the first image on the page, but when I hover over subsequent images it only changes the rollover state of the first image on the page, not the image I'm hovering over. Any help would be appreciated. I'm using the following functions to change rollover state:

Code:

gallery_on = new Image ( );
gallery_off = new Image ( );
gallery_on.src = "gallery_on.png";
gallery_off.src = "gallery_off.png";

function button_on ( imgId )
{
  if ( document.images )
  {
    butOn = eval ( imgId + "_on.src" );
    document.getElementById(imgId).src = butOn;
  }
}

function button_off ( imgId )
{
  if ( document.images )
  {
    butOff = eval ( imgId + "_off.src" );
    document.getElementById(imgId).src = butOff;
  }
}

I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member.

I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it.

So, how can I make this happen?

Non-working Code:
Code:

HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>
 
Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect:

http://www.webdesignerwall.com/demo/...ed-hover2.html

i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work.

can anyone help???

thanks!

I am probably use way too much code to have this done.. but this is what I came up with..

Code:

$(function() {
    $("#mail")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
            $(this).attr("src", src);
	    $(this).css("bottom", 10);

            $(".msg").text("Signup for Alpha Web Pro, you get your own email account with us. [username]@alphawebpro.com").show("slow");

        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("_over", "");
            $(this).attr("src", src);
	    $(this).css("bottom", "5");
	    $(".msg").text("").hide("slow");
        });


    $("#user")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
            $(this).attr("src", src);
	    $(this).css("bottom", 10);

            $(".msg").text("Check out the Alpha Web Pro community. There you can interact with your programming friends and post things to the forum").show("slow");

        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("_over", "");
            $(this).attr("src", src);
	    $(this).css("bottom", "5");
	    $(".msg").text("").hide("slow");
        });
});


    $("#analytics")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
            $(this).attr("src", src);
	    $(this).css("bottom", 10);

            $(".msg").text("COMING SOON! - Website analytics for any and all of your websites you wish to monitor").show("slow");

        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("_over", "");
            $(this).attr("src", src);
	    $(this).css("bottom", "5");
	    $(".msg").text("").hide("slow");
        });
});


    $("#shop")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
            $(this).attr("src", src);
	    $(this).css("bottom", 10);

            $(".msg").text("Go shopping at Alpha Web Pro.com; we have what you are looking for. Website templates, scripts, and ebooks for noobs all the way to master coder").show("slow");

        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("_over", "");
            $(this).attr("src", src);
	    $(this).css("bottom", "5");
	    $(".msg").text("").hide("slow");
        });
});

Problem is it doesn't do anything. When I only have one image set to change on mouseover it works fine.. I put two or more in there it doesn't work on any of the images.

Any idea whats going on?
Thanks in advanced!