Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works

Changing Image on Click

  • Please log in to reply



    New Member

  • Member
  • Pip
  • 1 posts
This is a two part question.
Part 1 :
I have this bit of code. It's a drop down menu and when it expands it shows the Month names.
I want it so that when you click on each month it will change the image of the calendar.
I made 12 images one for each month. How can I accomplish this task?
As you can see currently they are linked to a new page, I want to just have one "home_Page.html"
that can load all the images.
Part 2:
What code would change the month image according to the month we are on?

<ul id="Months">

<li><a href="#">Months</a>


<li><a href="Jan_Page.html">Jan</a></li>
<li><a href="Feb_Page.html">Feb</a></li>
<li><a href="March_Page.html">Mar</a></li>
<li><a href="April_Page.html">Apr</a></li>
<li><a href="May_Page.html">May</a></li>
<li><a href="homePage.html">Jun</a></li>
<li><a href="July_Page.html">Jul</a></li>
<li><a href="Aug_Page.html">Aug</a></li>
<li><a href="Sep_Page.html">Sep</a></li>
<li><a href="Oct_Page.html">Oct</a></li>
<li><a href="Nov_Page.html">Nov</a></li>
<li><a href="Dec_Page.html">Dec</a></li>



  • 0





  • Member
  • PipPipPipPip
  • 1,355 posts
Hey there rquijano and welcome to GeeksToGo,

As far as I know in order to get what you looking for to work, you will need to use a little bit of JavaScript. Even if it's not the only method I would definitely recommend it. You'll find you can make your website alot more powerful with the addition of JavaScript.

Here is some code I wrote that answers both parts of your question:
<script type="text/javascript">
window.onload=showMonth; // This will run the script when the page gets loaded to return the current month

function showMonth(month) {
	var myMonth = new Date().getMonth(); // This is the function use to get a number between 0 and 11 representing the current month
	var monthName = new Array(12);
	if (month >= 0) // This statement checks to see if there is a specified date instead of using the current month
		myMonth = month;
	monthName[0] = "January";
	monthName[1] = "February";
	monthName[2] = "March";
	monthName[3] = "April";
	monthName[4] = "May";
	monthName[5] = "June";
	monthName[6] = "July";
	monthName[7] = "August";
	monthName[8] = "September";
	monthName[9] = "October";
	monthName[10] = "November";
	monthName[11] = "December";

	var x = document.getElementById("MonthPicture");
	x.src = "./" + monthName[myMonth] + ".png";

	x = document.getElementById("MonthName");

	<title>Picture Calander Selector</title>

<h1>Calander Selector</h1>

<a href="#" onclick="showMonth(0);">January</a> <!-- These are links calling the function with a parameter for a specific month -->
<a href="#" onclick="showMonth(1);">February</a>
<a href="#" onclick="showMonth(2);">March</a>
<a href="#" onclick="showMonth(3);">April</a>
<a href="#" onclick="showMonth(4);">May</a>
<a href="#" onclick="showMonth(5);">June</a>
<a href="#" onclick="showMonth(6);">July</a>
<a href="#" onclick="showMonth(7);">August</a>
<a href="#" onclick="showMonth(8);">September</a>
<a href="#" onclick="showMonth(9);">October</a>
<a href="#" onclick="showMonth(10);">November</a>
<a href="#" onclick="showMonth(11);">December</a>

<a href="#" onclick="showMonth(-1);">Get Current Month</a> <!-- Setting the parameter to a number less than 0 will result in the current month being called --> 

<img id="MonthPicture" src="./January.png" alt="Month"/>
<p id="MonthName">January</p>

If you have any other questions don't hesitate to ask.

Peace Out :cool:
  • 0

Midevil Chaos

Midevil Chaos

    New Member

  • Member
  • Pip
  • 6 posts
I never tried with a calendar, but can't he just use an iframe? When he clicks on a pic, it would change for another one inside the iframe. I'm sure it could work in a calendar.

Edited by Midevil Chaos, 28 July 2012 - 11:14 PM.

  • 0




  • Member
  • PipPipPipPip
  • 1,355 posts

I never tried with a calendar, but can't he just use an iframe? When he clicks on a pic, it would change for another one inside the iframe. I'm sure it could work in a calendar.

Hey there Midevel,

He would still need some form of underlying code in order to know exactly what month he would like to change too. Unless I am not understanding what exactly you want to do? Maybe post through some example code, maybe your idea is more efficient. But take into consideration his question, how would you display current month without any code? I don't understand your idea behind the iFrame?

Edit: I think I guessed what it is you want to do with the iFrame, you want to just link all those pages he has into an iFrame. This would defeat the purpose as that's doing exactly what his doing now, the user would like to cut out multiple pages and put it all into one.

Peace Out :cool:

Edited by spike_hacker_inc, 29 July 2012 - 02:55 AM.

  • 0

Midevil Chaos

Midevil Chaos

    New Member

  • Member
  • Pip
  • 6 posts
lol, I'd have to give it a try. Maybe loading the image into the iframe, while using the menu options to do so? But then again, I've never tried that.

I don't know how to explain. So, I'll see if I can come up with the coding for that.

EDIT: Nope, it doesn't work with html (not with a drop down menu that is).

Edited by Midevil Chaos, 31 July 2012 - 02:19 PM.

  • 0

Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP