473,327 Members | 2,071 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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>

Feb 14 '07 #1
4 12243
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Roland Hall | last post by:
I read Aaron's article: http://www.aspfaq.com/show.asp?id=2276 re: protecting images from linked to by other sites. There is a link at the bottom of that page that references an interesting...
4
by: Lijun Yang | last post by:
Hey, I am able to disable the right mouse button on images for netscape and IE but it won't work for Opera. Here is the code: // start of the code var clickmessage="Sorry, you don't have...
2
by: Sam Carleton | last post by:
I feel like a complete fool! I should know the answer to the Q: How do I load an image with JS and replace the default image? Some background: My final objective is to have a web site where it...
1
by: David T-G | last post by:
Hi! Please be gentle; I'm new to ciwas and CSS in general, and know little to no javascript (but that might win me points here ;-) I have nine 'tab' images, with corresponding high-background...
0
by: Jim | last post by:
I know this is a little off-topic for C#, but I'm writing my user controls with C#, and the other more HTML-related groups looked like there hasn't been activity in days for some reason......
4
by: VR | last post by:
Hi, I am trying to have a menu item (which is an HTML img) to change as a mouse moves over it. So, my code looks something like this: <a onmouseover="ActivateImage('MyImage');"...
11
by: moondaddy | last post by:
I have images that I need to prevent the user from doing a right click and selecting "Save Picture As"? How can I do this? -- moondaddy@nospam.com
1
by: jamie | last post by:
To anyone that can help: I would like to images into a right click menu I have for an Access application. So far, I load the menu, and my thought is using the image list control, I grab the...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.