JavaScript - Can't Get This Rollover To Work.

I have a small .png on my site. I want to view at 250% when I rollover it.

Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space).

Any recommendations for other ways?

I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The script looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. Any idea of a fix?

The script is below. I have it sitting in its own js file within my Wordpress theme.

Code:

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

My site is he http://www.computerdepot-online.net/

Hey,

Recently I've been looking into disjointed rollovers but for the life of me I can't seem to find a way to implement what I want to do.

What I want to do is when I hover a link, It shows the image associated with the link in a div or element that I've pulled via mysql and php. Also when the page is loaded the first results image should populate the div before any interaction with the webpage whatsoever.

My current code the first image doesn't show a default image from the database because it uses css and from what I've read so far It looks like I need to use javascript too so any help welcomed and appreciated in getting me going in the right direction.

My current testing code is below:

Code:

<style type="text/css">
#linksDiv{border:1px #000 solid; width:300px;}
ul#links a {display: block; width:100px;}
ul#links a:hover {color:#fff; background:#AAA;border-right:5px double white;}

ul#links a img {height: 0; width: 0; border-width: 0;}
ul#links a:hover img {position: absolute; top: 37px; left: 180px; height: 100px; width: 100px; border:1px #000 solid;}
#default
</style>

<?php

$dbhost = 'localhost';
$dbuser = '***';
$dbpass = '***';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');

$dbname = 'testimg';
mysql_select_db($dbname);

echo '<div id="linksDiv"><ul id="links">';
$sql = mysql_query("SELECT * FROM tbimages") or die ('Error: '.mysql_error ());
    while($row = mysql_fetch_array($sql)) {
		
	$name = $row['name'];
        $img = $row['image'];
	

    echo '<a href="#">'.$name.'<img src="'.$img.'" title="'.$name.'" /></a>';
				
				
    }
   echo'</ul></div>';
?>

Hi Guys,

I'm creating what is hoped to be a fun and slightly different page for Christmas.

I am looking to have about 6 'dangling' objects, each that bounce on rollover (currently working) and that play a different note/tune. At the moment you will see in the code that I am using HTML5 to do this - whilst I am ok with this (I will create a flash fall back) I am unable to work out how to play a different sound for each rollover.

Of course if there is a more cross browser friendly solution I'm all ears...

Any help much appreciated!

Please see below code...

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3")

</script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<style type="text/css">
body {
background-color: #FFF;
}


div {
padding:0px;
width:116px;
height:211px;
text-align:center;
float:left;
display:block;
}


</style>
</head>

<body>


<div id="bouncy1">
<a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div>

<div id="bouncy2">
<a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div>


<SCRIPT>
$(function(){

//Add bounce effect on Click of the DIV
$('#bouncy1').mouseenter(function () {
$(this).effect("bounce", { times:3 }, 500);
});

$('#bouncy2').mouseenter(function () {
$(this).effect("bounce", { times:3 }, 300);
});

});
</SCRIPT>
</body>
</html>

Currently i have rollover images when click on active a hide show div tag with the css property.

the problem is that i want to keep the buttons on active state till someone clicks on another button then the button returns to a down state and the new button that was click on stay up.

Code:

<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4', 'a5','a6');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

please help

This JavaScript is linked externally and was written to add a hover action to navigation links. It downloads quick and works great, however, the code is written to apply to all image links on the page. I need a declaration that will make the action apply Only to the navigation links. Not sure the best approach here. getElementById, or another var? Any insight is greatly appreciated.

JavaScript:
window.onload = rolloverInit;

function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A") {
setupRollover(document.images[i]);
}
}
}

function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "images/navbar/" + thisImage.id + "_ro.jpg";
thisImage.onmouseover = rollOver;

}

function rollOut() {
this.src = this.outImage.src;
}

function rollOver() {
this.src = this.overImage.src;
}



HTML(intended for this application):

<div id="navigation">
<ul>
<li><a href="index.html" target="_self" class="nav_home"><img src="images/navbar/home_tab.jpg" alt="home_tab" id="home_tab" /></a></li>
<li><a href="aboutus.html" target="_self" class="nav_about"><img src="images/navbar/about_tab.jpg" alt="about_tab" id="about_tab" /></a></li>
<li><a href="quartets.html" target="_self" class="nav_quartet"><img src="images/navbar/quartets_tab.jpg" alt="quartets_tab" id="quartets_tab" /></a></li>
<li><a href="events_calender.html" target="_self" class="nav_event"><img src="images/navbar/events_tab.jpg" alt="events_tab" id="events_tab" /></a></li>
<li><a href="members.html" target="_self" class="nav_members"><img src="images/navbar/members_tab.jpg" alt="members_tab" id="members_tab" /></a></li>
</ul>
</div>

01) I would like to rollover (onmouseover?) a button that is a video and have the video (button) play. (A 5 sec video that stops at end)

02) On rolloff (onmouseoff?) the same button I would like it to rewind to the beginning for next rollover.

03) I would like to add more of these "Video Button Rollovers" to the same website page in the future. I would like to use DreamWeaver CS4, and stay away from flash for more accessibility and less memory intensive overhead. (obviously no control-bar for video)
-----
I have all the parts to this to try a variety of solutions.
-----
-The video is a box with untied string on a white background.
- When played a person fades-on and ties the string into a bow.
(white background matches website background)
-----
Parts:
01) video from untied box to tied box with person .mov
02) image of first frame of video .jpg
03) video from untied box to tied box with person to person fade-off and untied box .mov
04) video of tied box with person to person fade-off and untied box.mov
-----
The parts will be on this website: http://mydata.salve.edu/emersonb/g2/media.html

Thanks

Hi, I have a a-z brand menu on my site. I want the user to be able to select a letter and a list of brands appear.

The problem I have is that I want the layer to appear at the position of the mouse (from the top left). I have this working fine but then when you rollover a link (brand) within the layer div it reactivates the call command and re positions the layer to the mouse again.

Please Please help. My code is as follows;

POSITION CODE;
Code:

var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
	rX = self.pageXOffset;
	rY = self.pageYOffset;
	}
else if(document.documentElement && document.documentElement.scrollTop) {
	rX = document.documentElement.scrollLeft;
	rY = document.documentElement.scrollTop;
	}
else if(document.body) {
	rX = document.body.scrollLeft;
	rY = document.body.scrollTop;
	}
if(document.all) {
	cX += rX; 
	cY += rY;
	}
d.style.left = (cX+5) + "px";
d.style.top = (cY+5) + "px";
}

TOGGLE HIDE SHOW LAYER;
Code:

function toggle_visibility(id) {
       var e = document.getElementById(id);
	   AssignPosition(e);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}

EXAMPLE OF A-Z MENU;
Code:

<a href="#" onclick="toggle_visibility('uniquename0');">A</a>

EXAMPLE OF LAYER TO DISPLAY WHICH CONTAINS THE OFFENDING LINKS;
Code:

<div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility('uniquename0');">
    
<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>

<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
	
</div>

Thank you
Dan

I have a div with an icon and some text. When the user hovers over the area, a box appears above it with a few links in the box.

I want the user to be able to select any of these links, as well as have the option NOT to select these links and have the box disappear when he moves off of the box.

I can't seem to achieve this with the script I'm using now - right now, as soon as the user moves off of the div/icon and moves the cursor UP to select the links in the box, the box disappears.


Any ideas?

Here's my JS code:

Code:

<script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}
	
function hide_it(){
document.all.box1.style.visibility = "collapse";
}
</script>

Here's my CSS code:

Code:

#box1{
position: absolute;
top: -186px;
left: 147px;
visibility: hidden;
}

#socialmedia-action-items-container {position: relative; float: right;}

#box-wrapper {padding: 0 0 21px 0; height: auto; width: 160px; background: url(../images/socialmedia/sm-funnel.png) 10px bottom no-repeat; float: left;}

#box-main {padding: 10px 10px 0 10px; height: auto; width: 140px; background-color: #cc0000; float: left;}

a.box-item1 { /*flickr*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/flickr.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item1:hover {
	color: #000;
	background: url(../images/socialmedia/flickr-over.png) top left no-repeat;}
	
a.box-item1 span {font-size: 0.7em;}
	
a.box-item2 { /*facebook*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/facebook.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item2:hover {
	color: #000;
	background: url(../images/socialmedia/facebook-over.png) top left no-repeat;}
	
a.box-item2 span {font-size: 0.7em;}

a.box-item3 { /*twitter*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/twitter.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item3:hover {
	color: #000;
	background: url(../images/socialmedia/twitter-over.png) top left no-repeat;}
	
a.box-item3 span {font-size: 0.7em;}

Here's my HTML code:

Code:

<div id="socialmedia-action-items-container">

<a class="twitter" onMouseOver="show_it()" onMouseOut="hide_it()">
                <span class="twitter-first">Follow Us on</span><br />
                <span class="twitter-last">Twitter</span>
</a>
            
            <div id="box1">
                <div id="box-wrapper">
                    <div id="box-main">
                        <a href="#" class="box-item1">Follow us <br /><span>on Flickr</span></a>
                        <a href="#" class="box-item2">Follow us <br /><span>on Facebook</span></a>
                        <a href="#" class="box-item3">Follow us <br /><span>on Twitter</span></a>                    </div>
                </div>
            </div>

</div>

Much appreciated!

OK, so I created my nav bar in Photoshop. I have a off image and on image.

So, now I create a js file that displays the on image when they are hovering over that item, etc. Problem is, the js file does it for all images.

For example, if the user hovers over the header banner, it tries to look for a different image. How can I update the following javascript to have it do that only in the nav bar.

Code:

window.onload=rolloverInit;

function rolloverInit( ) { 
	for ( var i=0; i<document.images.length; i++) { 
	if ( document.images[i].parentNode.tagName =="A" ) {
	setupRollover( document.images[i]);
	}
	}
 } 
 
 function setupRollover(thisImage) { 
	thisImage.outImage =new Image();
	thisImage.outImage.src= thisImage.src;
	thisImage.onmouseout=function() { 
	this.src=this.outImage.src;
	}

	thisImage.overImage = new Image();
	thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg";
	thisImage.onmouseover= function( ) { 
	this.src=this.overImage.src;
	} 
	}

I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please....


(roll over image) In the <head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif";
staticImage1 = new Image();
staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif";
...........................................................
(button)

<a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;">
<img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a>
...........................................................



(two frames at once text) In the <head>

<script language="javascript">
function loadTwo(iframe1URL, iframe2URL)
{
parent.frame1.location.href=iframe1URL
parent.frame2.location.href=iframe2URL
}
</script>
...........................................................
(button)

<a href="javascript:loadTwo('info.html','home.html')">info</a>



Thanks!

Hello all -

I am new to JS and figure this is probably an easy fix.

I have a wordpress self-hosted site. I am doing a nav bar with rollovers. I have the script saved as a js file and in the right directory. I have the Code:

<script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>

in the header.php file just after the body tag. I have the styles where I want them in the CSS file. And lastly I have the html and the appropriate wordpress php call in the right spot.

The css is working fine, which leads me to believe my css and html are spot on. But there is no rollover working. Do I need to put anything besides styling into my css file?

Any help is much appreciated.

Thanks.

Hi Guys, I hope this is a good place for me to post a question. I saw some responses referring to this and I hope as a newcomer my question is not booed! :)

I am attempting to compound a rollover effect I have currently working at this page. The 4 numbered buttons make the larger image next to it change upon on roll over. I would like the buttons themselves also to have a rollover state.

In my code below, I simply added a space in my JS script after the portion of the script that I know is working ends and added the newer code referring to 71, or rollimg71 (an arbitrary number). The area that says //button rollover effect is the code I added that does not break the site but does not work correctly.

My JS
<code>
// JavaScript Document
//gallery rollover effect
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image3 = new Image;
image0.src = 'ectonymimages/newsletter1.jpg';
image1.src = 'ectonymimages/newsletter2.jpg';
image2.src = 'ectonymimages/newsletter3.jpg';
image3.src = 'ectonymimages/newsletter4.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
image3 = '';
document.rollimg = '';
}

//button rollover effect
if (document.images) {
image71a = new Image;
image71b = new Image;
image71a.src = 'ectonymimages/newsletter1_link.gif';
image71b.src = 'ectonymimages/newsletter1_linkselected.gif';
} else {
image71a = '';
image71b = '';
document.rollimg71 = '';
}
</code>

My HTML
<code>
<div style="float:left; padding:10px 0 0 25px;">
<span onmouseover="document.rollimg.src=image0.src;" onmouseover="document.rollimg71.src=image71b.src;" onmouseout="document.rollimg71.src=image71a.src;"><img src="ectonymimages/newsletter1_link.gif" alt="Newsletter 1 Button" name="rollimg71"/></span>
<br /><br /><br />
<span onmouseover="document.rollimg.src=image1.src;"><img src="ectonymimages/newsletter2_link.gif" alt="Newsletter 2 Button" /></span>
<br /><br /><br />
<span onmouseover="document.rollimg.src=image2.src;"><img src="ectonymimages/newsletter3_link.gif" alt="Newsletter 3 Button" /></span>
<br /><br /><br />
<span onmouseover="document.rollimg.src=image3.src;"><img src="ectonymimages/newsletter4_link.gif" alt="Newsletter 4 Button" /></span>
</div>
<div style="float:right; padding-right:50px;">
<img src="ectonymimages/newsletter1.jpg" align="Newsletter Example" name="rollimg"/>
</div>
</code>


Right now, my HTML only attempts to affect the first button, but I hope to have it affecting all 4 buttons. (Presumably if I keep this same format, they would be rollimg72, rollimg73, and rollimg74 added somewhere in the JS) Further, I'll also compound an onclick function, for both the buttons and the larger images, that will open a pop up HTML window. So, my priorities are that I'd love for the buttons themselves to have a rollover effect and then also an onclick function that opens a link in a new window in addition to the rollover effect currently being used.

*If I mouse over a numbered button, that numbered button changes.
*If I mouse over a numbered button, depending on the numbered button doing the affecting, a larger image is displayed next to it that changes on rollover. (This step already works correctly.)
*If I click on a numbered button, 1 of 4 links would open.
If I click on the larger image that changes, 1 of 4 links would open.

If you've read this far, thank you in advance! Heh heh, this is the 2nd time I've typed this, as the forum logged me out and deleted my entire post when I clicked "preview". Any help is much appreciated! Gentlepeople, I ask your assistance.

-Marcus

I'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu"

here's the html code for the logo
<div id="nav">
<a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a>
</div><!-- nav -->

here's the javascript code that's causing the problems
window.onload = rolloverInit;

function rolloverInit() {
var nav = document.getElementById("navigation_menu");
for (var i=0; i<nav.images.length; i++) {
if (nav.images[i].parentNode.tagName == "A") {
setupRollover(nav.images[i]);
}
}
}

any help would be very appreciated