Modification of a javascript code

**Acunga** · 12-21-2009, 05:48 PM

Hello guys can somebody somehow modify the following code I had from another place so that the images convert into a background of the anchor and I can type some words over them.My preferrance is also to have ONE of the background images(they are not background right now) selected (this wouls mean colored) by default when you refresh he page, and not becoming the same like now:

<HTML>
<Head>
<Script Language=JavaScript>

var prevClicked = "";

function staySet(curr){

tmpStr = curr.toString();
if (prevClicked != "")
{
document.getElementById(prevClicked).disabled = false;
document.getElementById(prevClicked).src = prevClicked+'1.jpg'
}
document.getElementById(tmpStr).disabled = true;
document.getElementById(tmpStr).src = tmpStr+'3.jpg';
prevClicked = tmpStr;
}

function SwapImage(curr){

tmpStr = curr.toString();
var swap = event.type;
if (swap == 'mouseover'){document.getElementById(curr).src=tmpStr+'2.jpg'}
if (swap == 'mouseout'){document.getElementById(curr).src=tmpStr+'1.jpg'}
}

</Script>
</Head>
<Body>
<center>
<br><br><br>
<a href=javascript:staySet('A')><img src='A1.jpg' id='A' onMouseover="SwapImage('A')" onMouseout="SwapImage('A')" alt='This is the hover text'></a>
<a href=javascript:staySet('B')><img src='B1.jpg' id='B' onMouseover="SwapImage('B')" onMouseout="SwapImage('B')" alt='This is the hover text'></a>
</center>
</Body>
</HTML>

Thanak you very much.

**Acunga** · 12-22-2009, 09:03 AM

up up

**jscheuer1** · 12-22-2009, 10:03 AM

Code:

<Script Language=JavaScript>

is invalid, it should be:

Code:

<script type="text/javascript">

And here:

Code:

function SwapImage(curr){

tmpStr = curr.toString();
var swap = event.type;
if (swap == 'mouseover'){document.getElementById(curr).src=tmpStr+'2.jpg'}
if (swap == 'mouseout'){document.getElementById(curr).src=tmpStr+'1.jpg'}
}

In any browser following standards, event will be undefined, event.type will throw an error. There could be other coding problems. The code is too exposed anyway, so it would probably be best to start over.

It's unclear what you mean by:

have ONE of the background images . . . colored

You cannot color a background-image unless it has transparent or semi-transparent sections, and then only by having a different background-color show through it. But, if the background-image is smaller than the area of the element, the background-repeat may be set to no-repeat and the area it doesn't cover may be colored with the background-color. Or, you could have more than one image for the same element's background-image. One that appears 'colored' and one that doesn't. These could be swapped as desired for whatever given effect you are after.

Which would you most likely want to do? Which one would get this treatment and why?

**Acunga** · 12-23-2009, 12:21 PM

I am terribly sorry for the mistake i did not realize I was doing.By the word colored I was meaning changing totally the background image to another background image.And as you can suggest they are different colors.But they are with certain shapes so they NEED to be images not changing the anchor background color.
So what i would like to happen is the effect you get from the code above(and it is working if you put A1 A3 B1 B3 B2 A2 pictures in the same directory) to be applied to the background images of anchors, part of div and only on them!
I can give example of another site but not sure if it is allowed.
Basically I have horizontal menu(div) with anchors playing the role of buttons and they have css defined background image(same for all of them).When you click on any of them an iframe with information opens below them.So until the user clicks on another of these anchor buttons I want the background image of the selected anchor to remain changed from the rest.
Something like onfocus effect of CSS but i want to apply it permanently until user clicks on another anchor of the menu(div).Not like right now, if you click on the iframe the onfocus effect vanishes and the old background picture appears.
I hope I was clear now

**vwphillips** · 12-23-2009, 02:17 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

var Click=false;

function SwapImage(src){
 var e=window.event||arguments.callee.caller.arguments[0];
 var obj=window.event?e.srcElement:e.target;
 if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
 if (!Click||obj!=Click){
  if (!obj.out){
   obj.out=obj.src;
  }
  src=src?obj.src.substring(0,obj.src.lastIndexOf('/')+1)+src:obj.out;
  obj.src=src;
  if (e.type=='click'){
   if (Click){
    Click.src=Click.out;
   }
   Click=obj;
  }
 }
}

function staySet(){

}
/*]]>*/
</script></head>

<body>
<center>
<br><br><br>
<a href=javascript:staySet('A')><img src='http://www.vicsjavascripts.org.uk/StdImages/One.gif' onmouseover="SwapImage('Two.gif')" onmouseout="SwapImage();" onclick="SwapImage('Three.gif');" width="100" height="50" alt='This is the hover text'></a>
<a href=javascript:staySet('A')><img src='http://www.vicsjavascripts.org.uk/StdImages/Four.gif' onmouseover="SwapImage('Five.gif')" onmouseout="SwapImage('Four.gif');" onclick="SwapImage('Six.gif');" width="100" height="50" alt='This is the hover text'></a>
</center>
</body>

</html>

**jscheuer1** · 12-23-2009, 03:05 PM

At least that will work with the standard event model. It's still too exposed, the src and Click variables are global, the src variable is even an undeclared global. The code also exhibits a dangerous practice. One that won't cause problems in most cases, but when it does may be hard to track down - assigning properties to an element object that aren't intrinsic element object properties. Like global variables and especially undeclared global variables these can become the source of obscure conflicts in some browsers.

And these are not background images as requested.

But I'm not going to complain too much. If Acunga is happy . . .

@Acunga, perhaps you misunderstood me. I didn't say the code you posted wouldn't work at all. I said it had at least one invalid thing about it (browsers often, but not always correct for invalid), and that it used a proprietary event model that will not work in a browser that uses the standard event model. There's at least one that can do both, I think. But that's besides the point. For the most part only IE can do it the way you have it.

**vwphillips** · 12-23-2009, 03:47 PM

src IS NOT a global variable

Click is declared as a global variable and is legal and adaquote for this application

The hazards of using object proberties is subjective(and used in many DD scripts) and running more than one script on a page may always cause problems.

Feel free to use your own images or modify the code as you require or use your own solution.

**jscheuer1** · 12-23-2009, 04:44 PM

Ah, I see. The src 'variable' is not global, it's an argument. The Click could be made a property of the main function though, less chance of a global collision. As for making up properties for element objects, I've even got one or more published scripts in the DD library that do that. I no longer write like that for the very reason already stated. I didn't say object properties, if you make your own object or use a function (or better yet its prototype) as an object, there is much less chance of that being a problem and they're good solutions to not polluting the global space. It's inventing properties for objects that are also elements that can cause problems. Some DD scripts do that, but the trend for the most part is away from that. In jQuery this is dealt with by creating a single 'safe' object called 'data' to attach to elements, it's properties may be whatever you like, even ones that ordinarily are read only properties of the element. But if 'data' ever gets used by other scripts or by any browsers as an element property, this will still break down.

When using properties of elements, it is best to use the W3C standard attributes and properties for those elements, and best if these are used in a manner as they could be and that would make sense if there were no javascript involved. The javascript may then take and/or change their values in accordance with this and do some interesting things with them and the data they contain.

Now, just to be clear, as I think many folks get this confused, I'm not DD or really affiliated with the site except as a contributing author, forum participant and moderator. I have no say over what happens in the library, except to a degree with my own scripts. Forum policy is beyond my control as well, though as a moderator I have some leeway in interpreting it, and a voice in determining it. DD has final say.

If you go back to almost all of the earlier scripts in the DD library, from when it first started out, you will find some pretty atrocious coding, probably things even you would cringe at. DD chooses to keep these around, I'm not certain why. Perhaps it's a 'body of work' thing. Some of those scripts could be someone's entrance into javascript, poor souls.

Edit: This thread got even more off topic - that portion has been moved here:

http://www.dynamicdrive.com/forums/s...ad.php?t=51006

**Acunga** · 12-23-2009, 07:14 PM

Originally Posted by vwphillips

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

var Click=false;

function SwapImage(src){
 var e=window.event||arguments.callee.caller.arguments[0];
 var obj=window.event?e.srcElement:e.target;
 if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
 if (!Click||obj!=Click){
  if (!obj.out){
   obj.out=obj.src;
  }
  src=src?obj.src.substring(0,obj.src.lastIndexOf('/')+1)+src:obj.out;
  obj.src=src;
  if (e.type=='click'){
   if (Click){
    Click.src=Click.out;
   }
   Click=obj;
  }
 }
}

function staySet(){

}
/*]]>*/
</script></head>

<body>
<center>
<br><br><br>
<a href=javascript:staySet('A')><img src='http://www.vicsjavascripts.org.uk/StdImages/One.gif' onmouseover="SwapImage('Two.gif')" onmouseout="SwapImage();" onclick="SwapImage('Three.gif');" width="100" height="50" alt='This is the hover text'></a>
<a href=javascript:staySet('A')><img src='http://www.vicsjavascripts.org.uk/StdImages/Four.gif' onmouseover="SwapImage('Five.gif')" onmouseout="SwapImage('Four.gif');" onclick="SwapImage('Six.gif');" width="100" height="50" alt='This is the hover text'></a>
</center>
</body>

</html>

Man thank you very much for the code I modified it but after I tested it and expected these are not background images, they are with img tag whih means no text can be written(exept with z-index and div lets say but I do not want to do that as it behaves inadequate in resize).I want to have text which I can edit over them.
But other then that the code is doing what I want.I do not know how to convert it for background images of anchor element.Can you help me?

**vwphillips** · 12-23-2009, 10:31 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.link {
 width:100px;height:50px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);float:left;
}

.linkover {
 background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}
.linkclick {
 background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

.link2 {
 width:100px;height:50px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Four.gif);float:left;
}

.link2over {
 background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Five.gif);
}
.link2click {
 background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Six.gif);
}
/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/

var Click=false;

function SwapImage(cls){
 var e=window.event||arguments.callee.caller.arguments[0];
 var obj=window.event?e.srcElement:e.target;
 if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
 if (!Click||obj!=Click){
  if (!obj.out){
   obj.out=obj.className;
  }
  obj.className=obj.out+' '+(cls||'');
  if (e.type=='click'){
   if (Click){
    Click.className=Click.out;
   }
   Click=obj;
  }
 }
}

function staySet(){

}
/*]]>*/
</script></head>

<body>
<center>
<br><br><br>
<div class="link" onclick="staySet('A');SwapImage('linkclick');" onmouseover="SwapImage('linkover');" onmouseout="SwapImage('');">rr</div>
<div class="link" onclick="staySet('A');SwapImage('linkclick');" onmouseover="SwapImage('linkover');" onmouseout="SwapImage('');">rr</div>
<div class="link2" onclick="staySet('B');SwapImage('link2click');" onmouseover="SwapImage('link2over');" onmouseout="SwapImage('');">rr</div>
</center>
</body>

</html>

Thread: Modification of a javascript code

Thread Tools

Search Thread

Modification of a javascript code

Bookmarks

Bookmarks

Posting Permissions