473,320 Members | 2,003 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,320 software developers and data experts.

Question on Clickable Icon

I am trying to make an icon that is similar to the star in gmail. When you click on it, it changes to yellow and if you click on it again, it changes back to transperant.

So I have the first part working - from transparent to yellow, but how do I make it turn back to transparent?

I am thinking something like that?
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function switch_image()
  3. {
  4.     if (unclicked)  <--- don't know the syntax to do that
  5.         window.document.star.src = 'star_click.jpg'  
  6.     else
  7.         window.document.star.src = 'star_unclick.jpg'
  8. }
  9. </script>
  10. <body>
  11. <a href="#" onClick = switch_image()"><img src="star_unclick.jpg" name= "star"/></a>
  12. </body>
  13.  
  14.  
Am I on the right track? or am I doing it completely wrong? Thanks!
Oct 28 '07 #1
3 1187
Logician
210 100+
I am trying to make an icon that is similar to the star in gmail. When you click on it, it changes to yellow and if you click on it again, it changes back to transperant.
You could do it by comparing the current .src:
Expand|Select|Wrap|Line Numbers
  1. document.images['star'].src=document.images['star'].src.match(/star_unclick\.jpg$/)?'star_click.jpg':'star_click.jpg'';
Or by adding a property to the image that records its clicked state
Expand|Select|Wrap|Line Numbers
  1.  
  2. function switch_image(img, imgOn, imgOff)
  3. {
  4.   if (img.clickState)  <--- don't know the syntax to do that
  5.   {  
  6.      img.src = imgOff;
  7.      img.clickState=false;
  8.   }
  9.   else
  10.   {
  11.      img.src = imgOn;
  12.      img.clickState=true;
  13.   }
  14. }
  15.  
  16. <img src="star_unclick.jpg" onClick = "switch_image(this, 'star_click.jpg' ,'star_unclick.jpg'   )">
  17.  
  18.  
Untested.
Oct 28 '07 #2
Thanks! Now I have another question, how would I be able to keep track of if the star is clicked or not? I am thinking the following way:

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var clickState // global variable
  3.  
  4. function get_click_state()
  5. {
  6.     clickState = switch_image(this, 'star_click.jpg' ,'star_unclick.jpg');
  7. }
  8. </script>
  9.  
  10. <html>
  11. <img src="star_unclick.jpg" onClick = "switch_image(this, 'star_click.jpg' ,'star_unclick.jpg'); get_click_state();"/>
  12. </html>
  13.  
Does this work? I think even if it works, are there other ways to do it because a global variable is used here. Thanks!
Oct 28 '07 #3
Logician
210 100+
[color=#000066]if[/color] [color=#66CC66]([/color]img.[color=#006600]clickState[/color][color=#66CC66])[/color] <--- don[color=#3366CC]'t know the syntax to do that[/color]
That IS the syntax to do that.



Thanks! Now I have another question, how would I be able to keep track of if the star is clicked or not?
The example I gave does that, without a global variable. *
Oct 28 '07 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: siliconmike | last post by:
I'm writing a guest book where users can post comments. When the text data is displayed on html page, I'd like to convert the url's to clickable links, using some smart technique. eg. Hi I...
6
by: PhysicsGenius | last post by:
AAAAARRRRRRRRGGHGHGHGHGHGHGHGHGH!!!!!! I hate Macs. I have a wxPython program. It runs fine on OS X when I launch it from the Terminal ("pythonw appname.py") . The user wants to be able to...
8
by: Roedy Green | last post by:
I want to set up links to photos marked with camera icon. I would like it if I could replace code like this: <a href="images/roedy.jpg"><img src="images/camera.gif" width="29" height="24"...
13
by: Saber | last post by:
I did a lot of searches and read something about datagrids. But I couldn't find the answer of my simple question, how can I show only my desired columns of a table? for example I wrote this sql...
2
by: Robert Paulsen | last post by:
Hello, I am migrating from MySQL to PostgreSQL and ran into a limitation of PostgreSQL. I ran into this because of a technique I use for displaying results of a SELECT query. In some cases I...
0
by: Akbar | last post by:
Can anyone list the basic steps for creating a clickable custom icon on a Mappoint map? Currently I am to display custom icons on the map and have set: myPushPins.ReturnsHotArea = true; Now...
0
by: qwu2008 | last post by:
All, I wanted to create a browser helper object that has a clickable icon at the right corner of the browser (similar to the Google notebook icon at the right corner of the browser). When the user...
3
by: crazychrisy54 | last post by:
Hi there I just wondered if there is any way using GD to insert a clickable button or some clickable text into a image? It is possible to create images for buttons but what if you want a...
1
by: Vikash Jain [MSFT] | last post by:
Hi, I am using a link label in my application and am not setting any size for the link label. When i run my application i see the link label properly but only approximately 75% of the width of...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
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...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
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...
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: 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...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
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...

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.