Tab Images switch on tab menu click

#1 February 14th, 2007, 04:05 PM

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>

#2 February 14th, 2007, 07:45 PM

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:

Quote:

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

#3 February 14th, 2007, 07:45 PM

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:

Quote:

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:

Quote:

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

#4 February 14th, 2007, 08:05 PM

On Feb 14, 3:33 pm, "David Golightly" <davig...@gmail.comwrote:

Quote:

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
>
>
>

Quote:

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

>

Quote:

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

>

Quote:

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).

>

Quote:

Using the following code framerwork.

>

Quote:

>

Quote:

</script>
</head>

>

Quote:

>

Quote:

>

Quote:

>

Quote:

>

Quote:

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

>
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:
>
>
>

Quote:

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

>

Quote:

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

>

Quote:

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).

>

Quote:

Using the following code framerwork.

>

Quote:

>

Quote:

</script>
</head>

>

Quote:

>

Quote:

>

Quote:

>

Quote:

>

Quote:

<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 :((

#5 February 14th, 2007, 10:05 PM

On Feb 14, 12:58 pm, "JoJo" <jojoweb...@gmail.comwrote:

Quote:

On Feb 14, 3:33 pm, "David Golightly" <davig...@gmail.comwrote:
>
>
>

Quote:

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:

>

Quote:

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

>

Quote:

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

>

Quote:

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).

>

Quote:

Using the following code framerwork.

>

Quote:

>

Quote:

</script>
</head>

>

Quote:

>

Quote:

>

Quote:

>

Quote:

>

Quote:

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

>

Quote:

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.comwrote:

>

Quote:

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

>

Quote:

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

>

Quote:

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).

>

Quote:

Using the following code framerwork.

>

Quote:

>

Quote:

</script>
</head>

>

Quote:

>

Quote:

>

Quote:

>

Quote:

>

Quote:

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

>

Quote:

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

>

Quote:

Second, why not just do a

>

Quote:

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

>

Quote:

to turn on current and

>

Quote:

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

>

Quote:

to turn it off?

>

Quote:

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

Tab Images switch on tab menu click

Popular Articles

What is Bytes?