JavaScript - Need Help With Changing Image On Link Mouseover Script

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!

I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering.

I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is:

<script type="text/javascript">
if (document.images) {image0 = new Image;
image0.src = "i/p0.png";
image1 = new Image;
image1.src = "i/p1.png";
image2 = new Image;
image2.src = "i/p2.png";
image3 = new Image;
image3.src = "i/p3.png";
image4 = new Image;
image4.src = "i/p4.png";
image5 = new Image;
image5.src = "i/p5.png";
image6 = new Image;
image6.src = "i/p6.png";
}</script>

and

<img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/>
<span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span>
<br clear="all"/>

<span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/>

Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful.

I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code:
Code:

var current_overID = "";
var last_overID = "";
 
function item (img_name,width,height)
{
        img_prefix = img_name;
        this.slide_img = new Image (width,height);
        this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
 
function new_item (img_name,width,height) 
{
        item [img_name] = new item (img_name,width,height);
}
 
function mouseover (itemID, mapID)
{
        current_overID = itemID;
        if (current_overID != last_overID) {
                          document.deltavmap.src = item [current_overID].slide_img.src;
						  document.deltavmap.useMap=mapID;
        }
}

 
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more


<MAP NAME="deltav"> 
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')"  window.defaultStatus='' window.status='Engineering' return true > 
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true > 
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true > 
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 

<MAP NAME="eng"> 
<AREA SHAPE="RECT" COORDS="38,52,244,75"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
    window.defaultStatus='' 
    window.status='Batch Processing' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,82,230,103"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
    window.defaultStatus='' 
    window.status='Control Modules' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,112,143,136"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
    window.defaultStatus='' 
    window.status='Graphics'  return true
	>
    <AREA SHAPE="RECT" COORDS="40,141,176,168" 	
		HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
		window.defaultStatus=''
		window.status='ProtoTyping' return true
	>
<AREA SHAPE="RECT" COORDS="24,224,84,234" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
    window.defaultStatus='' 
    window.status='Software' return true 
    > 
<AREA SHAPE="RECT" COORDS="24,236,124,247" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
    window.defaultStatus=''
    window.status='Documentation' return true 
    > 
<AREA SHAPE="RECT" COORDS="25,248,76,261" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
    window.defaultStatus='' 
    window.status='Support' return true 
    > 
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 
... many others

Can any one tell me what i need to do to fix this in IE? Thanks!
Fayette

Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps.

On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options.

While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image.

Here's a link to the site so you can see for yourself: http://nebula-andra.com/
(And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see)

Here's the code I have for the image timer...

In the header, in a Javascript tag:

Code:

var currPic = 0;

var totPics = 12;

var keepTime;

var picName;

function setupPicChange(){
keepTime=setTimeout("changePic()", 2000);
}

function changePic(){
currPic++;
if(currPic > totPics) currPic = 1;
document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png";
setupPicChange();
}

function stopTimer(){
clearTimeout(keepTime);
}

function startTimer(){
keepTime=setTimeout("changePic()", 2000);
}

In the body:

Code:

<body onload="setupPicChange();">

<div id="logo_setup">
<p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo">

I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture.

If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me.

Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well.

I'm using a image of the day script and my pictures will not be located at the site where the code will be.


Code:

images[0] = "<img src='yourimage.jpg'>"

Do I/can I use the link such as
<a href="http://www.sample.com/mphases.htm">

right where (yourimage) is, in between the quotes to link to an offsite picture?
Could someone retype this snippet of code showing how it would look for me?

Thanks

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></div>

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 everyone,

1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript.

2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover?

Code:

var currentSlide = 1;
var maxSlides = 0;

function fadeImage(){
	opacity = 100;
	if(steps < 4){
		steps += 1;
		opacity = opacity / steps;
		imageObj = document.getElementById("slide-"+currentSlide);
		imageObjN = document.getElementById("slide-"+nextSlide);
		imageObjN.style.display = "block";

		imageObj.style.opacity = "" + opacity / 100;
		imageObjN.style.opacity = "" + ((steps * 25) / 100);
		//fade
		slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */
	}else{
		steps = 1;
		document.getElementById("slide-"+currentSlide).style.display = "none";
		currentSlide += 1;
		if(currentSlide > maxSlides){
			currentSlide = 1;
		}
		showSlide();
	}
}

function initSlideshow(){
	slidesCollection = document.getElementById("slides").children;
	maxSlides = slidesCollection.length;
	for (var i=0; i < maxSlides; i++){
		slidesCollection[i].id = "slide-"+(i+1);
		if (i > 0)
			slidesCollection[i].style.display = "none";
	}	
	steps = 1;
	nextSlide = 2;
	slideTimeout = 0;
	showSlide();
}

function showSlide(){
	clearTimeout(slideTimeout);
		
	nextSlide = currentSlide + 1;
	if (currentSlide >= maxSlides){
		nextSlide = 1;
	}
	
	slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */
}

I know this maybe sounds "newbie", perhaps I am still one.

I have 3 divs, all of them in a group "name", there are h1 tags inside them with names too. Well actually I have many many divs like this in several pages so I must use a JS sheet (.js).

Code:

<div name="area"> <h1 name="stringRed"> Mercury </h1> </div>
<div name="area"> <h1 name="stringRed"> Venus </h1> </div>
<div name="area"> <h1 name="stringRed"> Earth </h1> </div>

The idea is to create an event for the divs, a mouseover event to a div in order to change the color of the words inside the h1 tags. When the mouse is over one particular div the word inside it must change to red.

I was trying this Java Script script:

(a cross-browser event handler present)

Code:

    function initialize ( ) {
    aArea=document.getElementsByName("area");
    aStringRed=document.getElementsByName("stringRed");

    for (var i=0; i < aArea.length; i++) {
    addEvent (aArea[i], 'mouseover', changeColor);
    addEvent (aArea[i], 'mouseout', changeOutColor);
    }
    }

    function changeColor() {
    ????
    }
    function changeOutColor() {
    ????
    }

Thank you in advanced for any help.

Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right?

The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout.

I have this in the heading:

Code:

<script LANGUAGE="JavaScript">

function ColorBlock(oRegion,sLinkID) 
{	
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	oRegion.className = "MenuSelected";	
	oRegion.style.cursor="hand";
	sLinkID.style.color = "black";
}

function UncolorBlock(oRegion,sLinkID) 
{
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	var oToEl = window.event.toElement;
	if ((oToEl && !oRegion.contains(oToEl))||!oToEl) 
	{
	sLinkID.style.color = "white";
	oRegion.className = "MenuUnSelected";
	}
}
</script>

And this is in the body.

Code:

<table class=MenuTable>
   <tr><td  OnMouseover="ColorBlock(this, Link4);"
            OnMouseout="UncolorBlock(this, Link4);"
            CLASS="MenuUnSelected" nowrap>
      <a STYLE="color:white" ID="Link4"
         OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
      <div style="width:144; cursor=hand; font-weight:bold;">
      Education
      </a></div></td>
    </tr>
</table>

I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas?

I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them.

The page is at www.adam-k-watts.com

Hello. I have a script that detects the image size of a url and then shows a resized version of the image if it's necessary to resize. (this script was provided to me by the user bullant, thank you.) (Script will be shown later further down)

In order to display the resized image, I must specify the id tag of myImg(and a number) in the img tag and must have an equal number of urls in the script as I do img tags.

So, if I have three images I need to do the following to get them to appear.

Code:

<div><img id="myImg0" src='' alt="" /></div>
        <div><img id="myImg1" src='' alt="" /></div>
        <div><img id="myImg2" src='' alt="" /></div>

And this is the script (it can go right below the above code and all in the body tag):

Code:

<script type="text/javascript">
            var picUrl = [
                'http://localhost/test/pic1.jpg',
                'http://localhost/test/pic2.jpg',
                'http://localhost/test/pic3.jpg',
            ];
            //create image objects
            oPic = new Array();
            for(i=0; i < picUrl.length; i++){
                oPic[i] = new Image();
                oPic[i].src = picUrl[i];
            }
            window.onload=function(){
                var maxWidth = 200;
                var maxHeight = 200;
                for(i=0; i < oPic.length; i++){
                    var width = oPic[i].width; //original image width
                    var height = oPic[i].height;  //original image height
                    //set the image size to display on the page
                    var newDims = calcNewDimensions(width, height, maxWidth, maxHeight);
                    document.getElementById('myImg'+i).width = newDims['width'];
                    document.getElementById('myImg'+i).height = newDims['height'];
                    document.getElementById('myImg'+i).src = oPic[i].src;
                }
            }
            function calcNewDimensions(width, height, maxWidth, maxHeight){
                newDims = new Array();
                //scaling factors
                var xRatio = maxWidth / width;
                var yRatio = maxHeight / height;
                //calculate the new width and height
                if(width <= maxWidth && height <= maxHeight)  { //image does not need resizing
                    newDims["width"]  = width;
                    newDims["height"]  = height;
                } else if(xRatio * height < maxHeight) {
                    newDims["height"] = Math.round(xRatio * height);
                    newDims["width"]  = maxWidth;
                } else {
                    newDims["width"]  = Math.round(yRatio * width);
                    newDims["height"] = maxHeight;
                }
                return newDims;
            }
        </script>

O.k. Now, I have the following I am working with:

Code:

<!--Image 5--> <img
 src="http://blahblah.com/images/red2.jpg" alt="Item photo"
 onmouseover="document.swap.src='http://blahblah.com/images/red2.jpg';"
 height="80">

in which you can see that onmouseover, a larger image is shown (it's not rescaled). You can also see that the url of an img is specified there.

How can I get the rescaled image to show in that spot or the url from the picUrl Array and the image shown in the correct size, in that spot of Code:

onmouseover="document.swap.src=

?

This is the entire area in which the onmouseover code will be used in case you need it.

Code:

<html>
<head>  
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>MouseOver-Images</title>
  <style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
  </style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td id="kdwhdMAINPHOTO"
 style="text-align: center; background-color: white;">
<!--Image 1--> <img
 src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
 name="swap" style="border: 0px solid rgb(105, 105, 105);"
 height="450" width="450">
      <table id="kdwhdTHUMB" border="0" cellpadding="0"
 cellspacing="0" width="616">
        <tbody>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
 alt="Click on the picture below to enlarge" height="25"
 width="616"></td>
          </tr>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
 alt="" height="10" width="616"></td>
          </tr>
          <tr>
            <td id="kdwhdTHUMBNAILS"><!--Image 1--><img
 src="http://site.gems4me.com/images/450by450.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
 height="80">&nbsp;
<!--Image 2--> <img
 src="http://site.gems4me.com/images/450by450-2.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
 height="80">&nbsp;
<!--Image 3--> <img
 src="http://site.gems4me.com/images/450by450.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
 height="80">&nbsp;
<!--Image 4--> <img
 src="http://site.gems4me.com/images/450by450-2.jpg"
 alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
 height="80">&nbsp;
<!--Image 5--> <img
 src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
 onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
 height="80"></td>
          </tr>
          <tr>
            <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
 alt="" height="10" width="616"></td>
          </tr>
        </tbody>
      </table>
      </td>
      <td><img
 src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
 alt="" height="1" width="12"></td>
      <td id="kdwhdTABLE">
      <table border="0" cellpadding="5" cellspacing="0"
 width="296">
        <tbody>
          <tr>
            <td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR1C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff
            </td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
          <tr>
            <td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
            <td class="kdwhdSPECR2C2">Stuff</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

I go to a page and have this in the URL

http://beta.pigskinempire.com/boxscore.asp?w=6&s=5&yr=

I want to create a link on that page that when you click it it changes the URL to

http://beta.pigskinempire.com/game.asp?gnum=6&gslot=5

as you can see the numbers 6 and 5 are about the only things that are similar in the substring. I will have this on multiple pages so it will be taking different numbers from the same spots of the URL and plugging them into the new URL into the correct location.

Thank you very much if you can help me, I am thinking regEx will be needed but I am not very comfortable with it. Thanks again.

I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.

I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour.

My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to.

I've only ever done a small amount of JS coding but from the research I've done it should go something like this,

Code:

document.style.alinkColor = "COLOR"

I got to that via discovering that

Code:

document.style.backgroundColor = "COLOR"

will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case.

Anyone able to point me in the right direction?