|
JavaScript - Enlarge .png On Rollover?
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? Similar TutorialsHi guys, I'm currently developing a simple website with a menu bar. Now this bar consists of several tabs, and I want to enlarge the tabs as soon as the user puts the mouse cursor over it. To illustrate this, here is the menu bar in normal mode: And when the user puts the cursor over the tab "Aktuelles", it should look like this: My idea was to use the jQuery-function .animate(), but the problem is that I use one background image for each tab and it is not possible to resize background images. I also tried to the <img> tag and change the height-attribute in the animate() function, but this doesn't work either. Well I have no idea left how I could solve this. Any help is very welcome. Thanks in advance, enne Hi Guys, I'm wondering if anyone knows of some simple javascript that allows me to create a floating image rollover enlargement, similar to the ones on the homepage of ThemeForest. I've been Googling for hours, so, if anyone knows of a script, i'd be much appreciative. Thanks, Christian HI, I am looking to enlarge an image when its hovered over, can anyone give me the code for this? Thanks Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! I have a div in my HTML that that when rolled over reveals an image. I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me! Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering.... if certain aspects of a website are made by using javascript such as the part on facebook "My Account"; where on click it opens a "window" with options. OR, on amazon where the menu items pop out on rollover;; can someone please tell me if they are acomplishing that by using javascript? thank you and i appreciate who ever is reading this. Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated. Code:
<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
if (document.images) {
photosUp = new Image
photosDown = new Image
photosUp.src = 'photosup.gif'
photosDown.src = 'photosdown.gif'
}
var images = new Array(3);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[0].src ="bannerad1.jpg"
images[1].src ="bannerad2.jpg"
images[2].src ="bannerad3.jpg"
var outElm;
var currentImageIndex = 0;
var maxImageIndex = images.length-1;
function cycle(){
if (outElm) {
outElm.src = images[currentImageIndex].src;
++currentImageIndex;
if (currentImageIndex > maxImageIndex) {
currentImageIndex = 0;
}
}
}
function initImageCycler(elmID){
outElm = document.getElementById(elmID);
if (outElm) {
setInterval("cycle()", 2000);
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="15" height="6" valign="top"></td>
<td width="103" height="6" valign="top"></td>
<td width="10" height="6" valign="top"></td>
<td width="9" height="6" valign="top"></td>
<td width="176" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="96" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="209" height="6" valign="top"></td>
<td width="11" height="6" valign="top"></td>
<td width="6" height="6" valign="top"></td>
<td width="133" height="6" valign="top"></td>
</tr>
<tr>
<td width="15" height="89" valign="top"></td>
<td width="103" height="89" valign="top"></td>
<td width="10" height="89" valign="top"></td>
<td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
<td width="6" height="89" valign="top"></td>
<td width="133" height="89" valign="top"></td>
</tr>
<tr>
<td width="15" height="108" valign="top"></td>
<td width="103" height="108" valign="top"></td>
<td width="10" height="108" valign="top"></td>
<td width="9" height="108" valign="top"></td>
<td width="483" height="222" colspan="5" rowspan="3" valign="top">
<h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
<h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West
and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
<td width="11" height="108" valign="top"></td>
<td width="6" height="108" valign="top"></td>
<td width="133" height="108" valign="top"></td>
</tr>
<tr>
<td width="15" height="2" valign="top"></td>
<td width="103" height="2" valign="top"></td>
<td width="10" height="2" valign="top"></td>
<td width="9" height="2" valign="top"></td>
<td width="11" height="2" valign="top"></td>
<td width="6" height="2" valign="top"></td>
<td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
</tr>
<tr>
<td width="15" height="112" valign="top"></td>
<td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
<td width="10" height="112" valign="top"></td>
<td width="9" height="112" valign="top"></td>
<td width="11" height="112" valign="top"></td>
<td width="6" height="112" valign="top"></td>
</tr>
<tr>
<td width="15" height="46" valign="top"></td>
<td width="10" height="46" valign="top"></td>
<td width="9" height="46" valign="top"></td>
<td width="176" height="46" valign="top"></td>
<td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
<td width="1" height="46" valign="top"></td>
<td width="209" height="46" valign="top"></td>
<td width="11" height="46" valign="top"></td>
<td width="6" height="46" valign="top"></td>
<td width="133" height="46" valign="top"></td>
</tr>
<tr>
<td width="15" height="44" valign="top"></td>
<td width="103" height="44" valign="top"></td>
<td width="10" height="44" valign="top"></td>
<td width="9" height="44" valign="top"></td>
<td width="176" height="44" valign="top"></td>
<td width="1" height="44" valign="top"></td>
<td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="209" height="44" valign="top"></td>
<td width="11" height="44" valign="top"></td>
<td width="6" height="44" valign="top"></td>
<td width="133" height="44" valign="top"></td>
</tr>
<tr>
<td width="15" height="49" valign="top"></td>
<td width="103" height="49" valign="top"></td>
<td width="10" height="49" valign="top"></td>
<td width="9" height="49" valign="top"></td>
<td width="176" height="49" valign="top"></td>
<td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="1" height="49" valign="top"></td>
<td width="209" height="49" valign="top"></td>
<td width="11" height="49" valign="top"></td>
<td width="6" height="49" valign="top"></td>
<td width="133" height="49" valign="top"></td>
</tr>
<tr>
<td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
<td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
<td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
<td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
<td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
<td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
<td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
<td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
</tr>
</table>
</body>
</html>
I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! 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>';
?>
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! 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> I have some rollover images on my website, and they don't switch until the page is finished loading. Is this standard? Is there a way to have the rollovers work when the page is still in the process of loading all the images? Thanks 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;
}
}
OK, I want several of my images on my webpage to change when the user hovers over the graphic. I created the js and it works fine. However, now all of my (linked) images change when I hover over them. I know what's causing this ( the Code: ( document.images[i].parentNode.tagName =="A" ) part), but not sure what the best way to fix it would be. Any advice? 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; } } [/CODE] 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 Hi all I have this rollover script (original done by Old Pedant) which I have modified making it 5 sets of 2 images. Althogh it seems to work I have a feeling it's not the best way of doing it hahahaha It seems clumsy to me (and i'm no coder hahaaha) Could it be made more concise. (or just made correct) Would really appreciate any help or positive comments. Code: <script type="text/javascript">
function linkOver(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("Off_1.png","On_1.png");
image.src = image.src.replace("Off_2.png","On_2.png");
image.src = image.src.replace("Off_3.png","On_3.png");
image.src = image.src.replace("Off_4.png","On_4.png");
image.src = image.src.replace("Off_5.png","On_5.png");
}
function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("On_1.png","Off_1.png");
image.src = image.src.replace("On_2.png","Off_2.png");
image.src = image.src.replace("On_3.png","Off_3.png");
image.src = image.src.replace("On_4.png","Off_4.png");
image.src = image.src.replace("On_5.png","Off_5.png");
}
</script>
</head>
I have 5 of these: Code: <body>
<div id="megaanchor" onmouseover="linkOver(this), callSecondFunction('soldier',50,40,200);" onmouseout="linkOut(this);" ><img src="images/image_Off.png" alt="" border="0" />
</body>
Hi, I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/ Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript? Any sample codes or assistance would be greatly appreciated. Thanks in advance! 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> 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 |
|||||||