Need to know if this is even possible (mouseover mayhem, long)

[J. Makela]

Hallo.

This should be a pretty entertaining question for you *real* javascript
writers.. I, being the lowly photoshop guy at an ad agency made the
mistake of actually saying "HTML" in a conversation once.. and now I
have been tasked with building a big website with LOTS of fancy
javascripting. Image rollovers mostly. Only problem is that I don't
really know how to do it. Of course, that's of no consequence so I have
to do it anyway. I've done simple mouseovers, but only for navigation
and stuff. Swapping out the actual image being moused over is relatively
easy.

But, one of the things I need to figure out is how to change 1 image
into 3 or 4 *different* images when OTHER parts of OTHER images are
moused over. It's very similar to a normal mouseover, except for the
fact that the image being moused over isn't the one changing. A
completely different picture at the bottom of the page needs to change.

Say there are 3 product names on the page (in an image, not copy or
text, so it'd be like an imagemap-type link). There is also a box at the
bottom that shows product 1 at the moment. But, when "Product 2" is
moused over in the main image, the box at the bottom has to change to
show Product 2. Same thing with Product 3. Is that even possible? I know
I've seen it before, but I don't know if it's javascripting that was
responsible. Is there a better CSS solution? Or was it built in Flash
and I'm in even more trouble than I think I am?

Second issue is an image mouseover that changes the color of *text* on
the page. They roll the pointer over a certain part of an image, and the
pertinent explanatory text *next* to the image needs to change color, as
well as having that particular part of the image change as well. Say I
slice a television JPG into 2 parts.. when you mouseover the screen, it
changes color AND some text to the right changes color to red. Doable
with a sliced-up image probably, but is it doable with actual text/copy?
The images/copy I've been given don't lend themselves to a simple image
rollover.

I know this is a pretty stupid post and I have no business meddling with
powers I don't understand.. the thing I need to know most is if this
stuff is even *possible*.. all the sample code I've found so far can
change text and images, but only the text and images being moused over..
I haven't found anything yet that can change one *separate* image into 3
different images based on mouseovers or change text colors based on an
image mouseover.

Any clues? Hints? Where to start (aside from jumping off a tall
buliding)? Kinda at the end of my rope here and was hoping somebody
could point me in the right direction. Thanks very much for any help you
guys can give, it is appreciated.
*heavy sigh*
J

[McKirahan]

"J. Makela" <mi******@yahoo .com> wrote in message
news:7TE3d.1798 7$wV.2386@attbi _s54...

Hallo.

This should be a pretty entertaining question for you *real* javascript
writers.. I, being the lowly photoshop guy at an ad agency made the
mistake of actually saying "HTML" in a conversation once.. and now I
have been tasked with building a big website with LOTS of fancy
javascripting. Image rollovers mostly. Only problem is that I don't
really know how to do it. Of course, that's of no consequence so I have
to do it anyway. I've done simple mouseovers, but only for navigation
and stuff. Swapping out the actual image being moused over is relatively
easy.

But, one of the things I need to figure out is how to change 1 image
into 3 or 4 *different* images when OTHER parts of OTHER images are
moused over. It's very similar to a normal mouseover, except for the
fact that the image being moused over isn't the one changing. A
completely different picture at the bottom of the page needs to change.

Say there are 3 product names on the page (in an image, not copy or
text, so it'd be like an imagemap-type link). There is also a box at the
bottom that shows product 1 at the moment. But, when "Product 2" is
moused over in the main image, the box at the bottom has to change to
show Product 2. Same thing with Product 3. Is that even possible? I know
I've seen it before, but I don't know if it's javascripting that was
responsible. Is there a better CSS solution? Or was it built in Flash
and I'm in even more trouble than I think I am?

Second issue is an image mouseover that changes the color of *text* on
the page. They roll the pointer over a certain part of an image, and the
pertinent explanatory text *next* to the image needs to change color, as
well as having that particular part of the image change as well. Say I
slice a television JPG into 2 parts.. when you mouseover the screen, it
changes color AND some text to the right changes color to red. Doable
with a sliced-up image probably, but is it doable with actual text/copy?
The images/copy I've been given don't lend themselves to a simple image
rollover.

I know this is a pretty stupid post and I have no business meddling with
powers I don't understand.. the thing I need to know most is if this
stuff is even *possible*.. all the sample code I've found so far can
change text and images, but only the text and images being moused over..
I haven't found anything yet that can change one *separate* image into 3
different images based on mouseovers or change text colors based on an
image mouseover.

Any clues? Hints? Where to start (aside from jumping off a tall
buliding)? Kinda at the end of my rope here and was hoping somebody
could point me in the right direction. Thanks very much for any help you
guys can give, it is appreciated.
*heavy sigh*
J

Will this help for the first part?

Test "as-is"; watch for word-wrap.

<html>
<head>
<title>onmouse. htm</title>
</head>
<body>
<img src="http://www.google.com/images/logo.gif"
border="0" width="276" height="110" usemap="#google ">
<br>
<img src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">
<map name="google">
<area shape="RECT" coords="0,0,68, 109"
onmouseover="ja vascript:onmous e('G')" onmouseout="onm ouse('')" alt="G">
<area shape="RECT" coords="69,0,11 6,109"
onmouseover="ja vascript:onmous e('O')" onmouseout="onm ouse('')" alt="O">
<area shape="RECT" coords="117,0,1 61,109"
onmouseover="ja vascript:onmous e('O')" onmouseout="onm ouse('')" alt="O">
<area shape="RECT" coords="162,0,2 04,109"
onmouseover="ja vascript:onmous e('G')" onmouseout="onm ouse('')" alt="G">
<area shape="RECT" coords="205,0,2 25,109"
onmouseover="ja vascript:onmous e('L')" onmouseout="onm ouse('')" alt="L">
<area shape="RECT" coords="226,0,2 75,109"
onmouseover="ja vascript:onmous e('E')" onmouseout="onm ouse('')" alt="E">
</map>
<script type="text/javascript">
var save = document.getEle mentById("img") .src;
function onmouse(what) {
var pict;
if (what != "") {
pict = "http://www.outdoordeco rcentral.com/graphics/BA07L91";
pict += what.toUpperCas e() + ".jpg";
} else {
pict = save;
}
document.getEle mentById("img") .src = pict;
}
</script>
</body>
</html>

[Michael Winter]

On Mon, 20 Sep 2004 19:04:24 GMT, McKirahan <Ne**@McKirahan .com> wrote:

[snip]

<img src="http://www.google.com/images/logo.gif"
border="0" width="276" height="110" usemap="#google ">
<br>
<img
src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">
[snip]
var save = document.getEle mentById("img") .src;

[snip]

Interesting. So where is this element, 'img'?

Mike
Please trim quotes.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[McKirahan]

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opsem3ofcg x13kvk@atlantis ...

On Mon, 20 Sep 2004 19:04:24 GMT, McKirahan <Ne**@McKirahan .com> wrote:

[snip]

<img src="http://www.google.com/images/logo.gif"
border="0" width="276" height="110" usemap="#google ">
<br>
<img
src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">

[snip]

var save = document.getEle mentById("img") .src;

[snip]

Interesting. So where is this element, 'img'?

Mike
Please trim quotes.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

"img" is the name assigned at the end of the following tag:

<img src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">

Here's a version that highlights text on mouseover.

<html>
<head>
<title>onmouse. htm</title>
</head>
<body>
<img src="http://www.google.com/images/logo.gif"
border="0" width="276" height="110" usemap="#google ">
<pre>
<br><span id="tx1">Google 's 1st letter.</span>
<br><span id="tx2">Google 's 2nd letter.</span>
<br><span id="tx3">Google 's 3rd letter.</span>
<br><span id="tx4">Google 's 4th letter.</span>
<br><span id="tx5">Google 's 5th letter.</span>
<br><span id="tx6">Google 's 6th letter.</span>
</pre>
<img src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">
<map name="google">
<area shape="RECT" coords="0,0,68, 109"
onmouseover="ja vascript:onmous e('tx1','G')" onmouseout="onm ouse('tx1','')"
alt="G">
<area shape="RECT" coords="69,0,11 6,109"
onmouseover="ja vascript:onmous e('tx2','O')" onmouseout="onm ouse('tx2','')"
alt="O">
<area shape="RECT" coords="117,0,1 61,109"
onmouseover="ja vascript:onmous e('tx3','O')" onmouseout="onm ouse('tx3','')"
alt="O">
<area shape="RECT" coords="162,0,2 04,109"
onmouseover="ja vascript:onmous e('tx4','G')" onmouseout="onm ouse('tx4','')"
alt="G">
<area shape="RECT" coords="205,0,2 25,109"
onmouseover="ja vascript:onmous e('tx5','L')" onmouseout="onm ouse('tx5','')"
alt="L">
<area shape="RECT" coords="226,0,2 75,109"
onmouseover="ja vascript:onmous e('tx6','E')" onmouseout="onm ouse('tx6','')"
alt="E">
</map>
<script type="text/javascript">
var save = document.getEle mentById("img") .src;
function onmouse(parm,wh at) {
var pict;
if (what != "") {
colo = "yellow";
pict = "http://www.outdoordeco rcentral.com/graphics/BA07L91";
pict += what.toUpperCas e() + ".jpg";
} else {
colo = "white";
pict = save;
}
document.getEle mentById("img") .src = pict;
document.getEle mentById(parm). style.backgroun d = colo;
}
</script>
</body>
</html>

[Randy Webb]

McKirahan wrote:

<--snip-->

"img" is the name assigned at the end of the following tag:

<img src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">
Yes, but you try to access it using getElementByID, which is looking for
an *ID*. The fact it works in IE only means IE is getting it wrong.
Here's a version that highlights text on mouseover.
No, its a version that works in IE, and no other browser I tested it in.

<--snip-->
<area shape="RECT" coords="0,0,68, 109"
onmouseover="ja vascript:onmous e('tx1','G')" onmouseout="onm ouse('tx1','')"
alt="G">
The javascript:, AFAIK, is not needed there.
document.getEle mentById("img") .src = pict;

Here, you are trying to access an image with the name="img", yet the img
tag has no ID attribute, hence it fails in non-IE browsers. This is but
one error code produced by Mozilla:

Error: document.getEle mentById("img") has no properties
Source File:
file:///C:/Documents%20and %20Settings/Randy/My%20Documents/onmouse.htm
Line: 50

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[McKirahan]

"Randy Webb" <Hi************ @aol.com> wrote in message
news:0O******** ************@co mcast.com...

McKirahan wrote:

<--snip-->

"img" is the name assigned at the end of the following tag:

<img src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif" border="0" width="320" height="320" alt="" name="img">

Yes, but you try to access it using getElementByID, which is looking for
an *ID*. The fact it works in IE only means IE is getting it wrong.

Here's a version that highlights text on mouseover.

No, its a version that works in IE, and no other browser I tested it in.

<--snip-->

<area shape="RECT" coords="0,0,68, 109"
onmouseover="ja vascript:onmous e('tx1','G')" onmouseout="onm ouse('tx1','')" alt="G">

The javascript:, AFAIK, is not needed there.

document.getEle mentById("img") .src = pict;

Here, you are trying to access an image with the name="img", yet the img
tag has no ID attribute, hence it fails in non-IE browsers. This is but
one error code produced by Mozilla:

Error: document.getEle mentById("img") has no properties
Source File:
file:///C:/Documents%20and %20Settings/Randy/My%20Documents/onmouse.htm
Line: 50

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

Try this though I only tested it under IE.

<html>
<head>
<title>unchecks .htm</title>
<script type="text/javascript">
function checkonly(what) {
var form = document.fruitf orm;
for (var i=0; i<form.elements .length; i++) {
if (form.elements[i].type == "checkbox") {
if (what == 0) {
if (form.elements[i].value != "0") {
if (form.elements[i].name != what) {
form.elements[i].checked = false;
}
}
} else {
if (form.elements[i].value == "0") {
form.elements[i].checked = false;
}
}
}
}
}
</script>
</head>
<body>
<form name="fruitform " action="..." method="post">
<input type="checkbox" value="1" name="fruit" onclick="checko nly('1')">
Apples
<input type="checkbox" value="2" name="fruit" onclick="checko nly('2')">
Oranges
<input type="checkbox" value="3" name="fruit" onclick="checko nly('3')">
Pears
<input type="checkbox" value="0" name="fruit" onclick="checko nly('0')"> No
Answer
</form>
</body>
</html>

[McKirahan]

[snip]

Try this though I only tested it under IE.

<html>
<head>
<title>unchecks .htm</title>

Please ignore my last response as it was for another post.

[Michael Winter]

On Mon, 20 Sep 2004 20:00:19 GMT, McKirahan <Ne**@McKirahan .com> wrote:

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message
news:opsem3ofcg x13kvk@atlantis ...
[snip]

Mike
Please trim quotes.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Don't include signatures when quoting someone else's post. A good
newsreader will remove them for you.
"img" is the name assigned at the end of the following tag:

<img
src="http://www.denijsdesig n.de/dd_images/i_allg/xtrans_x_320x32 0.gif"
border="0" width="320" height="320" alt="" name="img">

You missed my point entirely. You identify that element by name, yet you
use the getElementById method. Surely, common sense tells you something is
wrong with that.

I've mentioned before that using getElementById should only be used when
appropriate collections are not available. In this case, use the
document.images collection. It will retrieve images identified by both id
and name (ids checked first).

It pays you to test everything in a decent browser, rather than IE. Once
things are fine in Opera and Mozilla, then check with IE.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[J. Makela]

Wow, lots of good help here.. between this and some other stuff I found,
I think I *might* be able to muddle my way through. Pray for me. :)

Thanks very much!
J

[Michael Winter]

On Mon, 20 Sep 2004 17:58:27 GMT, J. Makela <mi******@yahoo .com> wrote:

[snip]

Swapping out the actual image being moused over is relatively easy.
Extremely easy. See:

<URL:http://www.mlwinter.pw p.blueyonder.co .uk/image-swap/>
But, one of the things I need to figure out is how to change 1
image into 3 or 4 *different* images when OTHER parts of OTHER images
are moused over. It's very similar to a normal mouseover, except for the
fact that the image being moused over isn't the one changing. A
completely different picture at the bottom of the page needs to change.
There's no problem here, but if the swapped-in image is important, make
sure it can be accessed even if Javascript is disabled. The easiest way to
assure this is to place the images within links.

function replaceImage(fN , iN) {
document.images[iN].src = fN;
}

<a href="first-large.jpg"
onmouseover="re placeImage(this .href,'mainImg' );">
<img src="first.jpg" alt=""></a>

<a href="second-large.jpg"
onmouseover="re placeImage(this .href,'mainImg' );">
<img src="second.jpg " alt=""></a>

<a href="third-large.jpg"
onmouseover="re placeImage(this .href,'mainImg' );">
<img src="third.jpg" alt=""></a>

<img name="mainImg" id="mainImg" src="first-large.jpg" alt="">

[snip]
Second issue is an image mouseover that changes the color of *text* on
the page.

Can you show the structure of this particular section of HTML? It might be
usable as is, or you might need to restructure it.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.