f



Tab Images switch on tab menu click

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>

0
2/14/2007 4:53:21 PM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

4 Replies
363 Views

Similar Articles

[PageSpeed] 19

On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.com> wrote:
> 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

0
David
2/14/2007 8:32:38 PM
On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.com> wrote:
> 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.com> wrote:
> 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

0
David
2/14/2007 8:33:33 PM
On Feb 14, 3:33 pm, "David Golightly" <davig...@gmail.com> wrote:
> On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.com> wrote:
>
>
>
> > 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.com> wrote:
>
>
>
> > 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 :((

0
JoJo
2/14/2007 8:58:16 PM
On Feb 14, 12:58 pm, "JoJo" <jojoweb...@gmail.com> wrote:
> On Feb 14, 3:33 pm, "David Golightly" <davig...@gmail.com> wrote:
>
>
>
> > On Feb 14, 8:53 am, "JoJo" <jojoweb...@gmail.com> wrote:
>
> > > 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.com> wrote:
>
> > > 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/The_DOM_and_JavaScript

-David

0
David
2/14/2007 10:53:24 PM
Reply: