kevin1989 Posted June 11, 2006 Share Posted June 11, 2006 First of all, hello! I'm new here :)I've been making a site (just for fun) Click here in which a .jpg is being used as the backgroundand I'm using img map to make the sites accessable, and now I want that text will be displayed in the center of the image whenever I click on for exampleindex,html,php etc. (look at the site if you don't know what I mean).I've been thinking about how to do this (thought about iframes too) but I can't really figure it out.Can anyone point me out in a direction how to handle this?Thanks in advance!-Kevin Link to comment Share on other sites More sharing options...
scott100 Posted June 11, 2006 Share Posted June 11, 2006 Can anyone point me out in a direction how to handle this?I would say that you would be best using javascript, access your element and change it's innerHTML.Here's an example: http://www.w3schools.com/dhtml/tryit.asp?f...e=trydhtml_demoWelcome to the forum Link to comment Share on other sites More sharing options...
justsomeguy Posted June 11, 2006 Share Posted June 11, 2006 Also, instead of using an imagemap (search engines will not index links in an imagemap), consider just using your image without the text as a background image, and create a layout over it to put the links where you want them. Then, it would be just as easy to create another space over the image to display your page content as well. Link to comment Share on other sites More sharing options...
kevin1989 Posted June 11, 2006 Author Share Posted June 11, 2006 I got it like this now: <html><title>eLearning: HTML, CSS, Java Script, PHP & mySQL</title><head><script type="text/javascript">function index(){document.getElementById('index').innerHTML="Index!"}function overzicht(){document.getElementById('overzicht').innerHTML="Overzicht!"}function html(){document.getElementById('html').innerHTML="HTML!"}function css(){document.getElementById('css').innerHTML="CSS!"}function javascript(){document.getElementById('javascript').innerHTML="Javascript!"}function php(){document.getElementById('php').innerHTML="PHP!"}function mysql(){document.getElementById('mysql').innerHTML="mySQL!"}</script></head><body bgcolor="black"><center><img src="Sitelay.jpg" align="center" width="1024" height="768" border="0" usemap="#map" /></center><map name="map"><area shape="rect" coords="918,424,1009,452" id="index" onClick="index" /><area shape="rect" coords="922,474,1007,499" id="overzicht" onClick="overzicht" /><area shape="rect" coords="894,511,982,538" id="html" onClick="html" /><area shape="rect" coords="859,551,969,579" id="css" onClick="css" /><area shape="rect" coords="839,591,950,626" id="javascript" onClick="javascript" /><area shape="rect" coords="803,639,922,677" id="php" onClick="php" /><area shape="rect" coords="779,695,887,727" id="mysql" onClick="mysql" /><area shape="rect" coords="25,22,221,74" href="http://kevin1989.awardspace.com/index.php" /></map><h5 id="index" onClick="index">Index</h5><h5 id="overzicht">Overzicht!</h5><h5 id="html">HTML</h5><h5 id="css">CSS</h5><h5 id="javascript">Java Script</h5><h5 id="php">PHP</h5><h5 id="mysql">mySQL</h5></body></html> But its not really showing the right thing o.O Link to comment Share on other sites More sharing options...
justsomeguy Posted June 11, 2006 Share Posted June 11, 2006 Right, it's probably not doing what you want. You probably want to use a table, make the table the size of the image and set the image as the background, and then line up where you want the different links, and you can use the rest of the space for content. BTW, is this a site for you to teach how to do HTML and CSS and those things? Link to comment Share on other sites More sharing options...
scott100 Posted June 11, 2006 Share Posted June 11, 2006 But its not really showing the right thing o.OYour calling the functions incorrectlyto call this function you must have onClick="index()" - notice the parenthasis ()function index(){document.getElementById('index').innerHTML="Index!"}<area shape="rect" coords="918,424,1009,452" id="index" onClick="index()" />Also, you could save yourself alot of code if you just used one function and passed values to it, in your case the id and the text to change... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now