469,359 Members | 1,663 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,359 developers. It's quick & easy.

can alt property of IMG be dynamically changed with rollover?

Dear NGers,

I would like to change the alt-text with the changing of the image during a
mouseover action.

Can document.images[0].altView be changed dynamically?

TIA,

pablo

Jul 23 '05 #1
9 3525
DU
pablo wrote:
Dear NGers,

I would like to change the alt-text with the changing of the image during a
mouseover action.

Can document.images[0].altView be changed dynamically?

TIA,

pablo

I don't know about a mouseover but I know changing the alt attribute can
be done on a click event which changes the image. I have a demo page
that does that and it works in MSIE 6 SP1a, Mozilla 1.4+, NS 7.1,
K-meleon 0.8.2 and Opera 7.51.

function YourFunctionName(evt)
{
var RefImage = (evt) ? evt.target : event ? event.srcElement : null;
if (RefImage.src.lastIndexOf("Off") != -1)
{
RefImage.src = "path/filenameOn.ext";
RefImage.title = "New title text";
RefImage.alt = "New alternate text";
}
else
{
RefImage.src = "path/filenameOff.ext";
RefImage.title = "Previous title text";
RefImage.alt = "Previous alternate text";
};
}
Not tested on a mouseover. Remember that it takes considerably a lot of
cpu, video memory to change the display of images, furthermore if the
mouseover is done quickly. On some modest system, this may crash the
application. So, the image should definitively be small and have its
number of colors reduced.

DU
Jul 23 '05 #2
pablo wrote:
Dear NGers,

I would like to change the alt-text with the changing of the image during a
mouseover action.

Can document.images[0].altView be changed dynamically?

TIA,

pablo


Since the ALT attribute is only supposed to appear in place of an unavailable
or undisplayable image (Netscape started the very bad habit of displaying the
ALT text as a roll-over tooltip), there's little reason to update it
dynamically via Javascript.

You probably want to change the TITLE attribute, and that is very easy to do.
However, the TITLE only appears as a tooltip when you are already over the
image, so changing it's value onmouseover seems sort of pointless, since the
only time it will be seen is when you are over the image. You might as well
just set it to what you want to appear when you the mouse rolls over the image
normally.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 23 '05 #3
pablo wrote:
I would like to change the alt-text with the changing of the image
during a mouseover action.

Can document.images[0].altView be changed dynamically?


Which DOM provides an "altView" property for (HTML)Image(Element)
objects? Use the "alt" property, it is part of all widespread DOMs,
including W3C DOM Level 2 HTML.

BTW: Your From header is invalid.
PointedEars
Jul 23 '05 #4

"Thomas 'PointedEars' Lahn" <Po*********@nurfuerspam.de> wrote in message
news:40**************@PointedEars.de...
pablo wrote:

Can document.images[0].altView be changed dynamically?


Which DOM provides an "altView" property for (HTML)Image(Element)
objects? Use the "alt" property, it is part of all widespread DOMs,
including W3C DOM Level 2 HTML.

PointedEars


I looped through the Image properties and found altValue.
I misspelled it doing the post. Sorry.

pablo

P.S.: Thanks to all who posted some answer.

Jul 23 '05 #5
pablo wrote:
"Thomas 'PointedEars' Lahn" <Po*********@nurfuerspam.de> wrote in message
news:40**************@PointedEars.de...
pablo wrote:

Can document.images[0].altView be changed dynamically?


Which DOM provides an "altView" property for (HTML)Image(Element)
objects? Use the "alt" property, it is part of all widespread DOMs,
including W3C DOM Level 2 HTML.

PointedEars


I looped through the Image properties and found altValue.
I misspelled it doing the post. Sorry.


In which user agent did you find an "altValue" property of the Image object?
I ran the code below in Netscape 4.78, Firefox 0.9, Internet Explorer 6SP1
and Opera 7.51 and could not locate an "altValue" property in any of those
user agents.

<body onload="load();">
<form name="outputForm">
<textarea name="output" cols="40" rows="20"></textarea>
</form>
<script type="text/javascript">
function load() {
var obj = new Image();
obj.onload = showProp;
obj.src = 'someimage.gif';
}
function showProp() {
var s = [];
for (var prop in this) {
if (prop != 'textContent') {
s.push(
prop + ' = ' + this[prop] +
' (' + typeof this[prop] + ')'
);
}
}
document.forms['outputForm'].elements['output'].value = s.join('\n');
}
</script>
</body>

Nor is "altValue" documented as a property of the Image object at <url:
http://msdn.microsoft.com/workshop/a...bjects/img.asp />

By the way, in case anyone is wondering, the reason for the "if (prop !=
'textContent')" test is because Firefox 0.9 throws an exception if you
attempt to access "typeof (new Image()).textContent".

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 23 '05 #6

"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com...
pablo wrote:

I looped through the Image properties and found altValue.
I misspelled it doing the post. Sorry.
In which user agent did you find an "altValue" property of the Image

object? I ran the code below in Netscape 4.78, Firefox 0.9, Internet Explorer 6SP1
and Opera 7.51 and could not locate an "altValue" property in any of those
user agents.

<body onload="load();">
<form name="outputForm">
<textarea name="output" cols="40" rows="20"></textarea>
</form>
<script type="text/javascript">
function load() {
var obj = new Image();
obj.onload = showProp;
obj.src = 'someimage.gif';
}
function showProp() {
var s = [];
for (var prop in this) {
if (prop != 'textContent') {
s.push(
prop + ' = ' + this[prop] +
' (' + typeof this[prop] + ')'
);
}
}
document.forms['outputForm'].elements['output'].value = s.join('\n');
}
</script>
</body>

Nor is "altValue" documented as a property of the Image object at <url:
http://msdn.microsoft.com/workshop/a...bjects/img.asp />
By the way, in case anyone is wondering, the reason for the "if (prop !=
'textContent')" test is because Firefox 0.9 throws an exception if you
attempt to access "typeof (new Image()).textContent".

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...3/reference/fr
ames.html
* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...l_reference_en
try.asp
* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html


Just did :
function img_prop() {
// loop through image properties
plt = document.images[0] ;
for( p in plt ) {
document.write("<br />Prop.= ", p, "Value= ", plt[p] ) ;
}
}

in my IE 5 version.
First 4 properties look like this:
Prop.= accessKeyValue=
Prop.= alignValue=
Prop.= allValue= [object]
Prop.= altValue= Zoals het was en wordt (klik maar...)
And the altValue corresponds to the alt-value of the image. (output is
alfabetically ordered)

Same results on IE5.5 sp2! (output not in alfabet order)

Trying to change the alt value in javascritps results in script error
message.
No 'simple' Alt-property found.

Thanks for your interest

pablo


Jul 23 '05 #7
On Thu, 17 Jun 2004 20:03:46 GMT, Grant Wagner
<gw*****@agricoreunited.com> wrote:
Since the ALT attribute is only supposed to appear in place of an unavailable
or undisplayable image (Netscape started the very bad habit of displaying the
ALT text as a roll-over tooltip), there's little reason to update it
dynamically via Javascript.
no, there is! if the image changes the content, then the alternative
content has to change too! (oh and it's not bad behaviour....)
You might as well
just set it to what you want to appear when you the mouse rolls over the image
normally.


There's more to title and alt than just mouse nav, remember the Access
Technologies.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 23 '05 #8

"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com...
In which user agent did you find an "altValue" property of the Image object? I ran the code below in Netscape 4.78, Firefox 0.9, Internet Explorer 6SP1
and Opera 7.51 and could not locate an "altValue" property in any of those
user agents.

<body onload="load();">
<form name="outputForm">
<textarea name="output" cols="40" rows="20"></textarea>
</form>
<script type="text/javascript">
function load() {
var obj = new Image();
obj.onload = showProp;
obj.src = 'someimage.gif';
}
function showProp() {
var s = [];
for (var prop in this) {
if (prop != 'textContent') {
s.push(
prop + ' = ' + this[prop] +
' (' + typeof this[prop] + ')'
);
}
}
document.forms['outputForm'].elements['output'].value = s.join('\n');
}
</script>
</body>

Nor is "altValue" documented as a property of the Image object at <url:
http://msdn.microsoft.com/workshop/a...bjects/img.asp />
By the way, in case anyone is wondering, the reason for the "if (prop !=
'textContent')" test is because Firefox 0.9 throws an exception if you
attempt to access "typeof (new Image()).textContent".

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...3/reference/fr
ames.html
* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...l_reference_en
try.asp
* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html


Sorry to say Grant,

but your code does not produce any output in the form textarea, nor does it
produce an error.

pablo

Jul 23 '05 #9
pablo wrote:
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com...
pablo wrote:

I looped through the Image properties and found altValue.
I misspelled it doing the post. Sorry.
In which user agent did you find an "altValue" property of the Image

object?
I ran the code below in Netscape 4.78, Firefox 0.9, Internet Explorer 6SP1
and Opera 7.51 and could not locate an "altValue" property in any of those
user agents.

<body onload="load();">
<form name="outputForm">
<textarea name="output" cols="40" rows="20"></textarea>
</form>
<script type="text/javascript">
function load() {
var obj = new Image();
obj.onload = showProp;
obj.src = 'someimage.gif';
}
function showProp() {
var s = [];
for (var prop in this) {
if (prop != 'textContent') {
s.push(
prop + ' = ' + this[prop] +
' (' + typeof this[prop] + ')'
);
}
}
document.forms['outputForm'].elements['output'].value = s.join('\n');
}
</script>
</body>

Nor is "altValue" documented as a property of the Image object at <url:
http://msdn.microsoft.com/workshop/a...bjects/img.asp

/>

By the way, in case anyone is wondering, the reason for the "if (prop !=
'textContent')" test is because Firefox 0.9 throws an exception if you
attempt to access "typeof (new Image()).textContent".


Just did :
function img_prop() {
// loop through image properties
plt = document.images[0] ;
for( p in plt ) {
document.write("<br />Prop.= ", p, "Value= ", plt[p] ) ;
}
}

in my IE 5 version.
First 4 properties look like this:
Prop.= accessKeyValue=
Prop.= alignValue=
Prop.= allValue= [object]
Prop.= altValue= Zoals het was en wordt (klik maar...)
And the altValue corresponds to the alt-value of the image. (output is
alfabetically ordered)


Yes, you're outputting:

Prop.=<theProperty>Value=<theValue>

and you're wondering why you are seeing:

Prop. =altValue=?

"alt" is the name of the properly, you are appending the word "Value" to that.

The first 4 properties are "accessKey", "align", "all", and "alt", _not_
"accessKeyValue", "alignValue", "allValue" and "altValue"

Replace:

document.write("<br />Prop.= ", p, "Value= ", plt[p] ) ;

with

document.write("<br />Prop.= ", p, " ; Value= ", plt[p] ) ;

(note the space, semi-colon and space separating the name of the property from
the string "Value") and you'll see that.
Same results on IE5.5 sp2! (output not in alfabet order)

Trying to change the alt value in javascritps results in script error
message.

No 'simple' Alt-property found.


Yes, a "simple" alt propery _was_ found, you appended the text string "Value" to
it during output.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Andrew Poulos | last post: by
6 posts views Thread by BStorm | last post: by
reply views Thread by =?Utf-8?B?Um9iZXJ0byBSYXp6YXV0aQ==?= | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.