HTML - Help Turning An Image Into A Back Button

Good morning world...I've got a problem. I work for a college updating web sites, and I don't have access to anything in the CSS that they setup before me (my administrators won't let me touch it), and I know very little of jQuery and javascript.

To the point though, I want to add a "back to top" button that hovers around the bottom corner of the browser. Can I do it without being able to access the CSS that the college uses as its base? (I guess using HTML and HTML only)?

I'm currently building a website for my jewelry and I have run into a simple, but aggravating problem. Should I include a back button? A back button would be the same a clicking on home, but are my visitors going to to know that?

This is what it would look like with out a back button:

http://i91.photobucket.com/albums/k3...backbutton.gif


This is what it would look like with the back button:

http://i91.photobucket.com/albums/k3...backbutton.gif

Hi there,

I'm coding a html website with two frames (one top, one bottom). From the homepage, when the user clicks a link, both the top and the frame the link's in change. when my user is on that new page and click the back button in the toolbar, only the top frame (title) changes, but not the bottom one. So, for the 2nd page, I need a way to make the toolbar's back button move the viewer two steps instead of one. Is that possible?

thank you,
RandomNameHTML

I have an html document (not a webpage) which I'm converting
into a .pdf. I've created it before without any issue but now I'm
noticing that when I click on the back button (after clicking on an
internal link) that it does one of two things... It either a) returns me
to the top of the document or b) takes me to some arbitrary spot
in the document. Neither one being where I or my clients need to
get back to.

Anybody experience this or have a fix?

Thanks,

Hunter

I am building this intranet for our employees at work. I am not a programmer, nor anykind of web professional, and I'm building this as an amateur. I have very basic knowledge of HTML and a bit of CSS, and that's pretty much it.

Once the thing is ready to be released, it will have to be updated on a regular basis, and by people whose background and function have nothing to do with scripting (in fact, I cannot take care of it myself all the time since I'm leaving for Europe soon). Therefore, I resigned to using MS Word 2007 as the html editor, since it's the only software anyone can usen here to update the files without having to learn how to code (I haven't found any freeware that didn't require prior html knowledge and the company will not pay for a software liscence of any kind). I know MS word is basically the worst thing one can use to build a website, but I couldn't find any better for this scenario.

Now I'm encountering a bit of a problem with the website, specifically with frames. The website (which is a frameset) is divided in two sections: a menu on the left (frame_menu), which is static should remain there all the time, and a frame to the right (frame_main) displaying the pages contents.

Now, when a user clicks on a link in frame_menu, the content (page A) displays in frame_main, which is what I want. Then if someone clicks on a link in the page A in frame_main that links to another page (page B), it will open gain in frame_main, replacing the page A that was there. So far, this is the behavior I want, and the frame properties were set for this.

The problem comes when the back button is used. If you are on page B, and then click the back button, you will come back to page A, in frame_main (so far still good), but any subsequent link the user will click after using the back button, whether it's a link in frame_menu or frame_main, will open in a new window, even though the default for opening links of the frame is set to frame_main as the target! This renders the frameset completely useless, and the whole frameset has to be closed and reloaded to function properly again.

I know frames are deprecated. The only alternative I have found was to use CSS to simulate frames. However, from what I have read (and tell me if I am mistaken), it only simulates the fact that you have a "fixed" menu on every page, but the menu is NOT a separate html file, and has to be part of every page on the website. This makes the updating of the menu very tedious, as it has to be changed on every page of the website, were an item to be added to it. This is why I used frames to begin with: no need to update every page to add something to your menu, just update the menu.html file and voila.

So I would like to know if you have any workaround for this problem. Any suggestion is appreciated. This was all tested with IE8. It's the only browser provided to the employees, I cannot use another one.

This is part of the code (generated by MS Word of course) that contains the frametset

<frameset framespacing=0 frameborder=0 border=0 cols="215,1*">
<frame name="frame_menu"
src="file:///\\sv050\GROUPS\AGT\AGT-CDS\AGT-CDS-CR\helper\html\menu.htm"
scrolling=no>
<frame name="frame_main"
src="file:///\\sv050\GROUPS\AGT\AGT-CDS\AGT-CDS-CR\helper\html\home.htm">
<noframes>
<body lang=EN-US style='tab-interval:36.0pt'>
<div class=WordSection1>
<p class=MsoNormal style='margin-bottom:10.0pt;line-height:115%'><span
style='font-size:11.0pt;line-height:115%'>This page uses frames, but your
browser doesn't support them.<o:p></o:p></span></p>
</div>
</body>
</noframes>
</frameset>

If the entire script of the frameset.html is needed, tell me and I'll post it.

Thanks in advance,

Guill

Hi,

I am creating a site in HTML using Dreamweaver. I use rollover buttons to navigate the site which are normally grey but white when rolled over. I have found that when I press the BACK button the button I had previously clicked is white and not grey. Try it out for yourself: http://www.RandAM.org/RichardAsh/

Once the problematic button is rolled over it works normally.

Is there a way to stop this from happening?

thanks,
R

I have a solution with ajax where I send POST-information via <a href> like this:

Code:

<form name="myForm" action="GoHere.php" method="POST">
<input type="hidden" name="myVariable" value="thevalueiwanttosubmit">
<a href="GoHere.php" onclick="myForm.submit(); return false;">Click here</a>
</form>

There's also a paginate system with page numbers at the bottom. When I press an item I go to another page with more details. When I press the Back-button in Mozilla everything works fine, but in Explorer I start from page number 1 instead of the page I originally came from.

How do I get Explorer to remember the page number? Do I have to change the javascript somehow?

I am creating a website that has a search button with an image. I would like to know if there is some simple code that I can include that would display the same basic image with a different color when the user mouses over the button.

Here is the code:

<FORM name="searchform"
onSubmit="return validateSearch();"
METHOD="POST"
ACTION="search_results_lt.asp">

<INPUT TYPE="text" NAME="Search" VALUE="" SIZE="20" >&nbsp;

<INPUT TYPE=IMAGE SRC="images/search_button.gif" Name="SearchButton" Value="Submit">

</FORM>

****
Thanks for your help,


Robin

Hi, I've got three buttons on a page and basically all I'm trying to do is put a BACK button as one of the three. But I'm having difficulties getting it to work.


Code:

<form name="reservationinfo" action="reservationcollected.php" method="post">
<input type="hidden" name="reservationID" value="<? echo $reservationID; ?>">
<center>
<table width="400" border="0" cellspacing="5">
<tr>
<td><input type="submit" value= "Reservation Collected" class="button" name="submit"></td>
<td><input type="submit" value='Cancel Reservation' onclick="reservationinfo.action='admincancelreservation.php'; return true;"></td>
<td><input type="submit" value='Back' onclick="reservationinfo.action='history.go(-1)'; return true;"></td>
</tr>
</table>
</center>
</form>


The solutions Ive been trying either take me to reservationcollected.php OR says history.go(-1) CANNOT BE DISPLAYED. Any ideas?

Cheers

So in January 2006 I posted a question about "making two buttons in one"



3 years and 5 months later i am happy to announce that I have found a solution.

Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A'

All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find.

HTML Code:

<html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>

<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

</head>

<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>

I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless.

Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method.

So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses.

here is the awesome code:
Code:

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}

I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect.

Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space.

So here is how I used the above to JavaScript to make a simple onclick image toggle:

HTML Code:

<img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">

Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers.

So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons:

Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow...



The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality.

So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool.

So here's the basic code for a rollover:
HTML Code:

<img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>

To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily.

So, back to the on/off button here is how you would code it using showHide with rollovers.
HTML Code:

<img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')"  style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">

So here is what is going on:
you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene?

Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers...

But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see.

I'm having a problem finding out how to turn off flash intro at Classic Kelli Maroney.
http://kellimaroney.com/#on_the_web

I think I have to change something in the "head" part of the edit page.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kelli Maroney | Welcome to the Kelli Maroney Website, for all things Kelli Maroney</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">

Thanks
Tom

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="0" width="0" data="http://www.youtube.com/v/link&autoplay=1&rel=0">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/link&autoplay=1&rel=0" />
</object>

I want to add a code to make the YouTube audio off. Any ideas?

Hi guys, new user!

I've been having this problem trying to create an external client for a game I play, the form from the website is
Code:

<form action="/bank/deposit" method="post">
<td style="padding-bottom: 1em; width: 100px"><input id="deposit_amount" name="deposit_amount" type="text" value="100" /></td>
<td style="padding-bottom: 1em"><input class="submit-large" name="commit" type="submit" value="Deposit" /></td>
</form>

From this, it's obvious you can use http://mafialive.com/bank/deposit?desposit_amount=100 to deposit your cash on hand but I'm trying to also pull in the actual value in the deposit_amount input, so that I can just either link or dynamically generate a link that will bank the cash on hand. simply /deposit doesn't work as it seems to require an actual number.

Any ideas? I'm rightfully stumped.

Thanks in advance!

Hi,

I am having a problem with a HTML email.

When sent through to Outlook 2000

All styles within tags are being re-written with "defanghtml" this in turn is turning all the styles of within the email's HTML code.

This is not happening for every recipient!?

Has anyone encountered this problem? Do you know what causes it? Can it be stopped?