Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Changing Image on Click

Started by rquijano , Jul 17 2012 07:34 PM

  • Please log in to reply

#1
rquijano
Posted 17 July 2012 - 07:34 PM

rquijano

    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>

<ul>

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

</ul>

</li>

</ul>
  • 0

Advertisements

#2
Spike
Posted 18 July 2012 - 01:17 AM

Spike

    nOoB

  • Member
  • PipPipPipPip
  • 1,357 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:
<html>
<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");
	x.innerHTML=monthName[myMonth];
}
</script>

<head>
	<title>Picture Calander Selector</title>
</head>

<body>
<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>

</br></br>
<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 --> 
</br></br>

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

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

Peace Out :cool:
  • 0

#3
Midevil Chaos
Posted 28 July 2012 - 11:14 PM

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

#4
Spike
Posted 29 July 2012 - 02:52 AM

Spike

    nOoB

  • Member
  • PipPipPipPip
  • 1,357 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

#5
Midevil Chaos
Posted 31 July 2012 - 01:36 PM

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
Back to Software Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Software Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP