By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,688 Members | 1,153 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,688 IT Pros & Developers. It's quick & easy.

Tab Images switch on tab menu click

P: n/a
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.

It is up for demo at: http://jojowebdesign.com/dom1.html

My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).

Using the following code framerwork.

<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
</script>
</head>

<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>

<br style="clear: both;" />
<p id="description">Choose an image.</p>

Feb 14 '07 #1
Share this Question
Share on Google+
4 Replies

P: n/a
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.

It is up for demo at:http://jojowebdesign.com/dom1.html

My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).

Using the following code framerwork.

<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}

</script>
</head>

<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>

<br style="clear: both;" />
<p id="description">Choose an image.</p>
First off, get some CSS classes going on in your HTML. Style tags are
clutter.

Second, why not just do a

img.src = img.src.replace(/.(jpg|gif|png|bmp)$/, '_current.$1');

to turn on current and

img.src = img.src.replace(/_current./, '.');

to turn it off?

David

Feb 14 '07 #2

P: n/a
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.

It is up for demo at:http://jojowebdesign.com/dom1.html

My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).

Using the following code framerwork.

<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}

</script>
</head>

<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>

<br style="clear: both;" />
<p id="description">Choose an image.</p>
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.

It is up for demo at:http://jojowebdesign.com/dom1.html

My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).

Using the following code framerwork.

<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}

</script>
</head>

<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>

<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>

<br style="clear: both;" />
<p id="description">Choose an image.</p>
First off, get some CSS classes going on in your HTML. Style tags are
clutter.

Second, why not just do a

img.src = img.src.replace(/.(jpg|gif|png|bmp)$/i, '_current.$1');

to turn on current and

img.src = img.src.replace(/_current./, '.');

to turn it off?

David

Feb 14 '07 #3

P: n/a
On Feb 14, 3:33 pm, "David Golightly" <davig...@gmail.comwrote:
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.
It is up for demo at:http://jojowebdesign.com/dom1.html
My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).
Using the following code framerwork.
<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}
</script>
</head>
<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>
<br style="clear: both;" />
<p id="description">Choose an image.</p>

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.
It is up for demo at:http://jojowebdesign.com/dom1.html
My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).
Using the following code framerwork.
<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}
</script>
</head>
<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>
<br style="clear: both;" />
<p id="description">Choose an image.</p>

First off, get some CSS classes going on in your HTML. Style tags are
clutter.

Second, why not just do a

img.src = img.src.replace(/.(jpg|gif|png|bmp)$/i, '_current.$1');

to turn on current and

img.src = img.src.replace(/_current./, '.');

to turn it off?

David
Does the script allready have enough information to use just img.src ?
Right now I think it is working off of the DOM information in the A
tag.. ?? Not sure..

I see what you are saying but I am not sure how to implement it, can
you show me an example? It is a good idea..

When the page loads I want the first tab to be the _current.gif by
default. If the click the second tab, then the first tab needs to be
turned off at the same time the second is set to _current.gif..

Make sense?

This part is harder than I thought it would be, the book only showed
LINK changing the image. In my site I have to use images that ALSO
change. NOw I am stuck :((

Feb 14 '07 #4

P: n/a
On Feb 14, 12:58 pm, "JoJo" <jojoweb...@gmail.comwrote:
On Feb 14, 3:33 pm, "David Golightly" <davig...@gmail.comwrote:
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.
It is up for demo at:http://jojowebdesign.com/dom1.html
My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).
Using the following code framerwork.
<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}
</script>
</head>
<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>
<br style="clear: both;" />
<p id="description">Choose an image.</p>
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.
It is up for demo at:http://jojowebdesign.com/dom1.html
My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).
Using the following code framerwork.
<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;}
</script>
</head>
<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>
<br style="clear: both;" />
<p id="description">Choose an image.</p>
First off, get some CSS classes going on in your HTML. Style tags are
clutter.
Second, why not just do a
img.src = img.src.replace(/.(jpg|gif|png|bmp)$/i, '_current.$1');
to turn on current and
img.src = img.src.replace(/_current./, '.');
to turn it off?
David

Does the script allready have enough information to use just img.src ?
Right now I think it is working off of the DOM information in the A
tag.. ?? Not sure..

I see what you are saying but I am not sure how to implement it, can
you show me an example? It is a good idea..

When the page loads I want the first tab to be the _current.gif by
default. If the click the second tab, then the first tab needs to be
turned off at the same time the second is set to _current.gif..

Make sense?

This part is harder than I thought it would be, the book only showed
LINK changing the image. In my site I have to use images that ALSO
change. NOw I am stuck :((
Might be good to take a step back and start learning some general
stuff about the DOM, rather than copy-and-pasting code from a book.
You're probably not ready yet to take on tasks like these without a
basic understanding of the DOM and how to get what you want out of it.

For example:

function showPic(whichpic) {
// you have the reference to your anchor
// you know that your anchor holds the img tag you're interested in
// now what?
var img = whichpic.getElementsByTagName('img')[0];
// aha!
// need more? you'll have to figure it out for yourself...
}

There are lots of good places to learn about the DOM. Among them:
http://developer.mozilla.org/en/docs...and_JavaScript

-David

Feb 14 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.