|
HTML - Change Link Name Once Clicked?
Hi guys,
I'm looking for a script or some code that would change the name of the link once clicked. Say I have a link that says: CLICK HERE TO SEE MAP Once I click it, the link says: BACK TO DESCRIPTION And once I click this one, it goes back to: CLICK HERE TO SEE MAP Any ideas? Similar TutorialsHi, i didnt know where to put this because I've got a problem with the CSS too. All the tutorials ive seen on the net require a "ordered/unordered list" to make a css menu. my site is a lot of images put together using divs, and then each relevant part included in a php file called index.php now i would like to have a menu button changed with a button with a tick on it when clicked to show the active state. here is my html with all the images put in order, the four menu button are in there home, events, donations, bhajans HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
<title>|Youth Seva Group|</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background-color:#FFFFFF;">
<div id="container">
<div id="sideLeft_">
<img id="sideLeft" src="images/sideLeft.jpg" width="79" height="768" alt="sideleft" />
</div>
<div id="krishna_">
<img id="krishna" src="images/krishna.jpg" width="155" height="227" alt="Krishna" />
</div>
<div id="logo_">
<img id="logo" src="images/logo.jpg" width="597" height="138" alt="Logo" />
</div>
<div id="hanuman_">
<img id="hanuman" src="images/hanuman.jpg" width="175" height="227" alt="Hanuman" />
</div>
<div id="sideRight_">
<img id="sideRight" src="images/sideRight.jpg" width="79" height="768" alt="sideright" />
</div>
<div id="ysg-06_">
<img id="ysg_06" src="images/ysg_06.gif" width="1" height="768" alt="" />
</div>
<div id="saiBaba_">
<img id="saiBaba" src="images/saiBaba.jpg" width="78" height="89" alt="SaiBaba" />
</div>
<div id="home1">
<a href="index.php"><img class="current-home" id="home1" src="images/home_off.gif" alt="Home"/> </a>
</div>
<div id="om_">
<img id="om" src="images/om.jpg" width="131" height="76" alt="Om" />
</div>
<div id="ysg-10_">
<img id="ysg_10" src="images/ysg_10.gif" width="1" height="76" alt="" />
</div>
<div id="donations_">
<a href="donations.php"><img id="donations" src="images/donations.gif" width="151" height="25" alt="Donations" /></a>
</div>
<div id="ysg-12_">
<img id="ysg_12" src="images/ysg_12.gif" width="85" height="89" alt="" />
</div>
<div id="events1">
<a href="events.php"><img id="events1" src="images/events_off.gif" width="151" height="22" alt="Events" /> </a>
</div>
<div id="bhajans_">
<a href="bhajans.php"><img id="bhajans" src="images/bhajans.gif" width="151" height="22" alt="Bhajans" /></a>
</div>
<div id="ysg-15_">
<img id="ysg_15" src="images/ysg_15.gif" width="151" height="29" alt="" />
</div>
<div id="ysg-16_">
<img id="ysg_16" src="images/ysg_16.gif" width="151" height="29" alt="" />
</div>
<div id="ysg-17_">
<img id="ysg_17" src="images/ysg_17.gif" width="6" height="13" alt="" />
</div>
<div id="ysg-20_">
<img id="ysg_20" src="images/ysg_20.gif" width="6" height="13" alt="" />
</div>
<div id="lineLeft_">
<img id="lineLeft" src="images/lineLeft.gif" width="239" height="5" alt="Line Left" />
</div>
<div id="lineRight_">
<img id="lineRight" src="images/lineRight.gif" width="266" height="5" alt="Line Right" />
</div>
</body>
</html>
this is my css Code: #container {
position: relative;
text-align: center;
width: 1068px;
height: 0px;
margin: 0px auto;
}
#sideLeft_ {
position:absolute;
left:0px;
top:0px;
width:79px;
height:768px;
}
#krishna_ {
position:absolute;
left:79px;
top:0px;
width:155px;
height:227px;
}
#logo_ {
position:absolute;
left:234px;
top:0px;
width:597px;
height:138px;
}
#hanuman_ {
position:absolute;
left:831px;
top:0px;
width:175px;
height:227px;
}
#sideRight_ {
position:absolute;
left:1006px;
top:0px;
width:79px;
height:768px;
}
#ysg-06_ {
position:absolute;
left:1085px;
top:0px;
width:1px;
height:768px;
}
#saiBaba_ {
position:absolute;
left:234px;
top:138px;
width:78px;
height:89px;
}
#home1 a:active, .current-home {
position:absolute;
left:312px;
top:138px;
width:151px;
height:25px;
background-position: top;
background:url(home_on.gif);
}
#events1 a {
position:absolute;
left:312px;
top:163px;
width:151px;
height:22px;
background-position: top;
}
#om_ {
position:absolute;
left:463px;
top:138px;
width:131px;
height:76px;
}
#ysg-10_ {
position:absolute;
left:594px;
top:138px;
width:1px;
height:76px;
}
#donations_ {
position:absolute;
left:595px;
top:138px;
width:151px;
height:25px;
}
#ysg-12_ {
position:absolute;
left:746px;
top:138px;
width:85px;
height:89px;
}
#bhajans_ {
position:absolute;
left:595px;
top:163px;
width:151px;
height:22px;
}
#ysg-15_ {
position:absolute;
left:312px;
top:185px;
width:151px;
height:29px;
}
#ysg-16_ {
position:absolute;
left:595px;
top:185px;
width:151px;
height:29px;
}
#ysg-17_ {
position:absolute;
left:312px;
top:214px;
width:6px;
height:13px;
}
#aboutus_ {
position:absolute;
left:318px;
top:214px;
width:211px;
height:24px;
}
#resposibilities_ {
position:absolute;
left:529px;
top:214px;
width:211px;
height:24px;
}
#ysg-20_ {
position:absolute;
left:740px;
top:214px;
width:6px;
height:13px;
}
#lineLeft_ {
position:absolute;
left:79px;
top:227px;
width:239px;
height:5px;
}
#lineRight_ {
position:absolute;
left:740px;
top:227px;
width:266px;
height:5px;
}
#logIn_ {
position:absolute;
left:79px;
top:232px;
width:111px;
height:33px;
}
#register_ {
position:absolute;
left:190px;
top:232px;
width:112px;
height:33px;
}
#ysg-25_ {
position:absolute;
left:302px;
top:232px;
width:16px;
height:27px;
}
#ysg-26_ {
position:absolute;
left:740px;
top:232px;
width:266px;
height:49px;
}
#ysg-27_ {
position:absolute;
left:318px;
top:238px;
width:422px;
height:21px;
}
#ysg-28_ {
position:absolute;
left:302px;
top:259px;
width:10px;
height:22px;
}
#sayings_ {
position:absolute;
left:312px;
top:259px;
width:76px;
height:22px;
}
#ysg-30_ {
position:absolute;
left:388px;
top:259px;
width:352px;
height:22px;
}
#ysg-31_ {
position:absolute;
left:79px;
top:265px;
width:48px;
height:16px;
}
#memberBenefits_ {
position:absolute;
left:127px;
top:265px;
width:114px;
height:11px;
}
#ysg-33_ {
position:absolute;
left:241px;
top:265px;
width:61px;
height:16px;
}
#ysg-34_ {
position:absolute;
left:127px;
top:276px;
width:114px;
height:5px;
}
#content_ {
position:absolute;
left:79px;
top:281px;
width:927px;
height:487px;
}
a:active
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}
img{
border:0px;
}
and this is the main php file with the includes. PHP Code: <?php include 'headerplusmenu.php'; ?> <?php include 'login.php'; ?> <?php include 'sayings.php'; ?> <?php include 'main.php'; ?> <?php include 'homesubmenu.php'; ?> <div id="content_"> <p>Homepage</p></div> Hey guys, I was wondering if there was a possible way to make a link disapppear after it is clicked, and for it to stay that way until the link is changed. Help? Thanks when i click on a link on my "test page" the div with my links in it moves up...but when i click back to the "home" page it moves back down take a look at the attached file to see what i'm talking about...is there any way of fixing this...it does this on both FF and IE 8. can someone help me with this...if it's something that i simply have to deal with then that's fine...just thought that maybe something was wrong and could be fixed. i know.. stupid question.. i should know how to do this.. but i dont.. how do i make a layer appear when i link is clicked? i want to have [?] next to something, and when clicked, a layer becomes visible that shows some text, then when an X on the layer is clicked, the layer becomes invisible again i know it has to do with visible=true/false.. but idk what to do.. help please Hi, i want some help regarding HTML links. I have a table containing topic and topic id. and another table having topic_id, sequence_no and Replies columns. I have a php + mysql script which show all the topics as html links. Now what i have to do is when any of link is clicked it should get identified and all the corresponding Replies should be displayed sequencially. I dont know how to identify and fetch topic_id on which i have clicked. Please help. Thanks, Jaas. Hello Guys, I use Named Anchor to navigate within my webpage. Is there any way how one can navigate back to the clicked link from the destination? Normally the backspace works. But I would like to add a link at the destination and clicking this link would take me back to the clicked-link. Is this possible? I hope I made myself clear. If any of you can give me some advise about this issue, it would be much appreciated. Thanks in advance, Chuma P.S - I read in a site that using the <li> tag can do this. I am unsure how that works either. If any of you have any idea about this, please let me know. Thanks. Website - http://www.jakobmetzger.com/misc/sites/kindlingeffects/ CSS - http://www.jakobmetzger.com/misc/sit...stylesheet.css The CSS that is related to the rollover images in under /*-- Features Rollover Image--*/ Whenever someone clicks one of the features on that page in firefox it leaves a grey box around it. Is there a way I can remove that box or somethign I can do to hide it? Hey guys I need some help regarding a website I made from a template. you can view the site at http://www.goosetrailbnb.com/ The problem is that when you click on the links in the bottom navigation bar, it will only show the page for a second (not properly aligned) and then redirect back to the index.html automatically. If you click the links on the menu up top in the flash header, the links work fine. I am using iframe....so my pages are index.html, iframe_0.html, iframe_1.html, iframe_2.html and so on. I have the links set as iframe_0.html etc for the links in the bottom navigation bar. Any help would be appreciated!!! Thanks I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase Ive been working on a website in my free time, and I have been wondering if it's possible to hover over a link, and change the text color of another link. A picture of one of my web pages is shown in the link below. http://i223.photobucket.com/albums/d...screenshot.jpg I want to be able to hover over something from the side navigation bars and have various links in the bottom naviational bar change color. So like hovering over Blood Elf, would make Death Knight, Mage, Paladin, Warlock, Priest, Rogue, Hunter turn red Does anyone know how to do this? or even know if it is possible? i have an iframe set up using the code Quote: <iframe href="http://www.maidenerleghweather.com/forecast2.php" target="_self" scrolling="no" src="http://www.wunderground.com/swf/pws_mini_rf_nc.swf?station=IWOKINGH4&freq=2.5&units=metric&lang=EN onClick=" style="zoom: 85%;"></iframe> which is displayed at http://www.maidenerleghweather.com/livedata.html the trouble is when i click on the iframe it links to a weatherunderground weather website, rather than the one i have specified in the code. is it possible to take control of this and use my own link instead? is it possible to use a transparent box over the iframe and then have my link connected to this? hopefully someone can point me in the right direction. i am a beginner with iframes and html so please be patient! I have this table that displays requests. The number of proposals is green. I need to make the request ID next to that red. How do I do that? $html .= "<tr>"; (number of proposals is green) $html .= "<td valign='top' height='20' style='border-top:1px solid #000000;color:#006600;padding-left:10px;' class='gtextNormal'>".$get_proposals."</td>"; $html .= "<td valign='top' height='20' style='border-top:1px solid #000000;' class='gtextNormal'>"; )This needs to display as red) $html .= "<a href='show_bids.php?id=$row[reqid]' class='gtextNormal'>$row[reqid]</a>"; $html .= "</td>"; Yeah so I'm probably doing something incredibly stupid and I've just been staring at this for too long and can't see it... Go to: http://test.rent2ownsb.com/south_ben...properties.php There, under Additional Options for the properties you will see links. All I want to do is change the link color to black. That whole thing is inside a div class .property-middle So I have a css rule .property a to color black (it's near the end in my stylesheet, http://test.rent2ownsb.com/css/style.css) SO WHY IN THE WORLD ISN'T IT TURNING BLACK??? Thank you in advance for recovering my sanity. Hi i have the following code: <li><a onclick="MM_openBrWindow('Contact.html','Contact','scrollbars=yes,width=650,height=500')">contact</a></li> Now when i go on that link i dont get the hand cursor, it doesnt change. (probably because i dont use 'href') But i dont want the page to chang ejust a popup with a contact form. I have tried by placing: href="index.html" (i thne get the hand cursor) but then it will not only open the popup but also refreshes the page which generates traffic. How can i mak it so that i get the hand cursor and it only opens a popup with the contact form. Thnx Heya.. Plz temme how 2 chaNge the color of any link...lik if link color iz blue n i wnt to change it in red color..! In between tis link i want to add the code that change the color-- $html .= '<a href="'.$this->link('view',$question->id).'">Q)'.$question->question.'</a>'; 2 ezy is tis 4 u guys na Tc! Is there a way to make a link within an iFrame to change the page the user is on? e.g. I have a menu, I put the iframe code on all my web pages, someone clicks on a link in the iframe and it changes the web page. Thanks in advance! okay so I'm using tables, (please don't lecture me on CSS) I'm doing this for a friend, and you would probably woun't do much for how much it pays. anyways so I'm using old fashioned tables in dreamweaver, I'm using a template and applying it to the html pages. In Dreamweaver, the links are the color that I want..grey,,,but when I upload them to the web, they go purple? or maybe it's the default blue. This is what I've done: 1) change them in the page properties in the template page -no good 2) attempt some basic css, with the automatic css selector in dreamweaver, uing a:link, a:hover etc, and applying it to the text --no good so can I change it in the code somewhere? or what??? no rebuilding and doing it in CSS is not an option, I don't know enough about it yet, Please help: www.altmedschools.com Hi, I'm trying to do an image changer that when you click on a link, an image changes. I have the image change working, but I want a link to the full-size image below to also change. I tried several things, but what makes the most sense to me is to have a function change the link, so I used the script I got for the image change and tweaked it so it would change the link.....it's not working. I've been trying very hard, but I'm not very good at javascript, so if someone could help, that would be wonderful! The page is he http://sc-lee.com/newlay/ac.html And the code in question is he Code: <head>
<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
***ntion changeText(linkadd)
{
document.link.href = linkadd;
}
</script>
</head>
<body>
<br><bR><a href="javascript:changeImage('studio/ac-1s.jpg'),changeText(ac-1.jpg);">perspective moving into court</a>
<br><a href="javascript:changeImage('studio/ac-3s.jpg'),changeText(ac-3.jpg)">perspective moving into court2</a>
<br><a href="javascript:changeImage('studio/ac-6s.jpg'),changeText(ac-6.jpg)">exterior perspective of complex</a>
<BR /><BR />
<img name="mainimage" src="studio/ac-1s.jpg">
<br /><a href="ac-1.jpg" target="_blank" name="linkadd">fullsize</a>
</body>
</body>
</html>
Hello, I got a problem, i want to add a new link "Contact us" in my web page. But i need to open up every single page to add the new link. Is there any simple ways to add it? Like i change my homepage , and every single page changes? Thanks Steve |
|||||||