Set Image source using java script

[abdullah1983]

Hi Guys,
I need some clarification regarding the problem with safari browser.
Please find my code below. I'm setting the image src, mouseover and
mouseout using javascript. The mouseover and mouseout are working
perfect but only the source is not setting using java script. Please
clarify me regarding this.

PS: This problem is only for safari browser.

<tr>
<td><a href="/public/magazine/default.asp" onmouseover="imageSwap
('navFront','navFrontOver');"
onmouseout="imageSwap('navFront','navFrontOff');">
<img src="javascript:imageSwap('navFront','navFrontOff' );" width="190"
height="21" border="0" alt="Current Issue" name="navFront"></a></td>
</tr>

<script language="javascript">
function imageSwap(imgLoc,newImg)
{
document[imgLoc].src= eval(newImg+".src")
}
</script>

Thanks In advance,
Abdul

[Sanjay]

just trying to help in debugging your problem

Are you sure if document[imgLoc] would give you the image object in
safari.

Thanks
Sanjay

[Randy Webb]

ab**********@gmail.com said the following on 1/10/2006 4:04 AM:

Hi Guys,
I need some clarification regarding the problem with safari browser.
Please find my code below. I'm setting the image src, mouseover and
mouseout using javascript. The mouseover and mouseout are working
perfect but only the source is not setting using java script. Please
clarify me regarding this.

PS: This problem is only for safari browser.
The problem is you are setting the src incorrectly.
<tr>
<td><a href="/public/magazine/default.asp" onmouseover="imageSwap
('navFront','navFrontOver');"
onmouseout="imageSwap('navFront','navFrontOff');">
<img src="javascript:imageSwap('navFront','navFrontOff' );" width="190"
<img src="someImage.jpg".....

Now, you have no problems.
height="21" border="0" alt="Current Issue" name="navFront"></a></td>
</tr>

<script language="javascript">
function imageSwap(imgLoc,newImg)
{
document[imgLoc].src= eval(newImg+".src")

That is an absurd way to swap an image.

If newImg is the name of an image, then get a proper reference to it
instead of using eval.

document.images[imgLoc].src = document.images[newImg].src;

If newImg is a variable name somewhere, then it is a property of the
window object:

document.images[imgLoc].src = window[newImg].src;

Look Ma! No eval.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Stewart Gordon]

ab**********@gmail.com wrote:

Hi Guys,
I need some clarification regarding the problem with safari browser.
Please find my code below. I'm setting the image src, mouseover and
mouseout using javascript. The mouseover and mouseout are working
perfect but only the source is not setting using java script. Please
clarify me regarding this.
It's JavaScript, not "java script".
PS: This problem is only for safari browser.

<tr>
<td><a href="/public/magazine/default.asp" onmouseover="imageSwap
('navFront','navFrontOver');"
onmouseout="imageSwap('navFront','navFrontOff');">
<img src="javascript:imageSwap('navFront','navFrontOff' );" width="190"
height="21" border="0" alt="Current Issue" name="navFront"></a></td>
</tr>

<script language="javascript">
function imageSwap(imgLoc,newImg)
{
document[imgLoc].src= eval(newImg+".src")
}
</script>

You use the name navFrontOff, but have forgotten to define it anywhere.
So why it works in any other browsers, I can't imagine. Possibly
because you got too carried away with trimming down the code, and ended
up cutting out something essential?

Stewart.

--
-----BEGIN GEEK CODE BLOCK-----
Version: 3.1
GCS/M d- s:- C++@ a->--- UB@ P+ L E@ W++@ N+++ o K-@ w++@ O? M V? PS-
PE- Y? PGP- t- 5? X? R b DI? D G e++>++++ h-- r-- !y
------END GEEK CODE BLOCK------

My e-mail is valid but not my primary mailbox. Please keep replies on
the 'group where everyone may benefit.

[Abdul]

Hi Sanjay,

Thanks for helping me in this, please find my whole code. The Image SRC
attribute is not even calling the javascript. So should I need to
include anything to call this javascript function?

<script language="JavaScript">
<!--
//sets the variables for the image swap
if (document.images) {
var onGif = "_on.gif";
var overGif = "_over.gif";
var offGif = "_off.gif";
var dir = "/images/nav/";
var currentPage = ""+window.location+""

navCurrOver = new Image;
navCurrOff = new Image;

navFrontOver = new Image;
navFrontOff = new Image;

navNewsOver = new Image;
navNewsOff = new Image;

navGlOver = new Image;
navGlOff = new Image;

navIdeaOver = new Image;
navIdeaOff = new Image;

navTutOver = new Image;
navTutOff = new Image;

navPbsOver = new Image;
navPbsOff = new Image;

navViewDateOver = new Image;
navViewDateOff = new Image;

navViewDestOver = new Image;
navViewDestOff = new Image;

navCurrOver.src = dir +"current_issue"+overGif;
if (currentPage.indexOf("/public/magazine/default.asp") != -1) {
navCurrOff.src = dir +"current_issue"+onGif;
}
else {
navCurrOff.src = dir +"current_issue"+offGif;
}

navFrontOver.src = dir +"2jul2002"+overGif;
if (currentPage.indexOf("/public/magazine/issues/2002_07/") != -1) {
navFrontOff.src = dir +"2jul2002"+onGif;
}
else {
navFrontOff.src = dir +"2jul2002"+offGif;
}

navNewsOver.src = dir +"ef_news"+overGif;
if (currentPage.indexOf("news.asp") != -1) {
navNewsOff.src = dir +"ef_news"+onGif;
}
else {
navNewsOff.src = dir +"ef_news"+offGif;
}

navGlOver.src = dir +"group_leader_spot"+overGif;
if (currentPage.indexOf("glspotlight") != -1) {
navGlOff.src = dir +"group_leader_spot"+onGif;
}
else {
navGlOff.src = dir +"group_leader_spot"+offGif;
}
navIdeaOver.src = dir +"idea_exchange"+overGif;
if (currentPage.indexOf("idea") != -1) {
navIdeaOff.src = dir +"idea_exchange"+onGif;
}
else {
navIdeaOff.src = dir +"idea_exchange"+offGif;
}

navTutOver.src = dir +"web_tutor"+overGif;
if (currentPage.indexOf("webtutor.asp") != -1) {
navTutOff.src = dir +"web_tutor"+onGif;
}
else {
navTutOff.src = dir +"web_tutor"+offGif;
}

navPbsOver.src = dir +"our_pbs"+overGif;
if (currentPage.indexOf("/pbs") != -1) {
navPbsOff.src = dir +"our_pbs"+onGif;
}
else {
navPbsOff.src = dir +"our_pbs"+offGif;
}

navViewDateOver.src = dir +"issues_by_date"+overGif
if (currentPage.indexOf("_date.asp") != -1) {
navViewDateOff.src = dir +"view_by_date"+onGif;
}
else {
navViewDateOff.src = dir +"issues_by_date"+offGif;
}

navViewDestOver.src = dir +"issues_by_dest"+overGif
if (currentPage.indexOf("_dest.asp") != -1) {
navViewDestOff.src = dir +"issues_by_dest"+onGif;
}
else {
navViewDestOff.src = dir +"issues_by_dest"+offGif;
}
}
//function that will swap the images
function imageSwap(imgLoc,newImg) {
document[imgLoc].src= eval(newImg+".src")
}
// -->
//if (currentPage.indexOf("/issues/") == -1) {
</script>

<table cellpadding="0" cellspacing="0" border="0" width="190"
ID="Table1">
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>
<tr>
<td><a href="/public/magazine/default.asp"
onmouseover="imageSwap('navCurr','navCurrOver');"
onmouseout="imageSwap('navCurr','navCurrOff');">
<img src="javascript:imageSwap('navCurr','navCurrOff'); " width="190"
height="21" border="0" alt="Current Issue" name="navCurr"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>

<tr>
<td><a href="default.asp"
onmouseover="imageSwap('navFront','navFrontOver'); "
onmouseout="imageSwap('navFront','navFrontOff');">
<img src="javascript:imageSwap('navFront','navFrontOff' );"
width="190" height="21" border="0" alt="July 2002"
name="navFront"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>
<tr>
<td><a href="news.asp"
onmouseover="imageSwap('navNews','navNewsOver');"
onmouseout="imageSwap('navNews','navNewsOff');">
<img src="javascript:imageSwap('navNews','navNewsOff'); " width="190"
height="21" border="0" alt="News and Happenings"
name="navNews"></a></td>
</tr>
<tr>
<td><a href="glspotlight.asp"
onmouseover="imageSwap('navGl','navGlOver');"
onmouseout="imageSwap('navGl','navGlOff');">
<img src="javascript:imageSwap('navGl','navGlOff');" width="190"
height="21" border="0" alt="Group Leader Spotlight"
name="navGl"></a></td>
</tr>
<tr>
<td><a href="idea.asp"
onmouseover="imageSwap('navIdea','navIdeaOver');"
onmouseout="imageSwap('navIdea','navIdeaOff');">
<img src="javascript:imageSwap('navIdea','navIdeaOff'); " width="190"
height="21" border="0" alt="Idea Exchange" name="navIdea"></a></td>
</tr>
<tr>
<td><a href="webtutor.asp"
onmouseover="imageSwap('navTut','navTutOver');"
onmouseout="imageSwap('navTut','navTutOff');">
<img src="javascript:imageSwap('navTut','navTutOff');" width="190"
height="21" border="0" alt="Web Tutor" name="navTut"></a></td>
</tr>
<tr>
<td><a href="pbs.asp" onmouseover="imageSwap('navPbs','navPbsOver');"
onmouseout="imageSwap('navPbs','navPbsOff');">
<img src="javascript:imageSwap('navPbs','navPbsOff');" width="190"
height="21" border="0" alt="Our PBS Partnership"
name="navPbs"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>
<tr>
<td><a href="/public/magazine/view_by_date.asp"
onmouseover="imageSwap('navViewDate','navViewDateO ver');"
onmouseout="imageSwap('navViewDate','navViewDateOf f');">
<img src="javascript:imageSwap('navViewDate','navViewDa teOff');"
width="190" height="21" border="0" alt="View Archives By Date"
name="navViewDate"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>
<tr>
<td><a href="/public/magazine/view_by_dest.asp"
onmouseover="imageSwap('navViewDest','navViewDestO ver');"
onmouseout="imageSwap('navViewDest','navViewDestOf f');">
<img src="javascript:imageSwap('navViewDest','navViewDe stOff');"
width="190" height="21" border="0" alt="View Archives By Destination"
name="navViewDest"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>
<tr>
<td bgcolor="#999999"><img src="/images/all/dotclear.gif" width="1"
height="3" alt="" border="0"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img src="/images/all/dotclear.gif" width="1"
height="1" alt="" border="0"></td>
</tr>
</table>

[Abdul]

Hey Randy,

The Problem is the src attribute of <img> is not even calling the
javascript function "imageSwap" when we access the asp page from safari
browser. So can you please tell me what should I do. This is very
critical and urgent for me.

Thanks In advance,
Abdul

[Thomas 'PointedEars' Lahn]

Abdul wrote:

The Problem is the src attribute of <img> is not even calling the
javascript function "imageSwap" when we access the asp page from safari
browser.
Nothing new here. The `javascript' pseudo-protocol is not supposed
to work as a URI reference which is expected for the `src' attribute
of the `img' element. That it does in some UAs, which obviously does
not include Safari/KHTML, is rather a security issue than a feature.
See also the recent Samy attack.
So can you please tell me what should I do. This is very
critical and urgent for me.

Do as Randy said. The function is already called by the `onmouseover'
and `onmouseout' event handlers where the call really belongs into.

Actually, you do not want to switch image when it is loaded (even if that
was possible) but you want to when the pointer moves over and off it. His
suggestion accomplishes exactly that.
PointedEars