Custom Back Button with rollover

  • Thread starter Simon Blackburn
  • Start date
S

Simon Blackburn

I want to put a "back" button on one of my pages using two images, error1.gif
and error2.gif.
I want error2.gif to be the image shown when the mouse is over error1.gif.

When the visitor clicks my rollover image, I want him/her to be sent back
one page using the browsers history.

Is it possible to create some simple code so this will work.
PS. I'm a total novice, sorry if this sounds simple.
 
T

Trevor Lawrence

Simon Blackburn said:
I want to put a "back" button on one of my pages using two images,
error1.gif
and error2.gif.
I want error2.gif to be the image shown when the mouse is over error1.gif.

When the visitor clicks my rollover image, I want him/her to be sent back
one page using the browsers history.

Is it possible to create some simple code so this will work.
PS. I'm a total novice, sorry if this sounds simple.
Click to expand...

Yes, it is possible but I am confused.

Do you want the button to be error1.gif by default - when the mouse is NOT
over it?
and error2.gif when the mouse IS over it?

If so, then there is some simple code to do this. I'll put it together when
I have clarification. (or someone else may reply before then)
 
S

Simon Blackburn

Thanks Lance.
I have come accross that site before. I know how to make a rollover image
but I want to know how to use the broswers history so when a visitor to my
website clicks the button, it takes them back x number of pages.

I know the code for a normal "back" button is:

<FORM><INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return
true;"> </FORM>


but how do i get this into my rollover image?


Here is an example of a similar button:

<a href="application.html" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Application','','images/application2.gif',1)"><img
src="images/application1.gif" alt="Applying Your Graphic(s)"
name="Application" width="92" height="21" border="0" id="Application" />

Instead of taking th website visitor to the page "application.html", i want
him or her to be taken back one page (an alternative to using the back button
on the browser)
 
T

Trevor Lawrence

Simon,
Here is a complete solution using Javascript, although Steve's solution may
be better

The images used exist on my site, so this will work as is. Subsitute your
own images.

<html>
<head>
<title>Go Back Demo</title>
<script type="text/javascript">
var img1 = 'http://tandcl.homemail.com.au/images/black.gif'
var img2 = 'http://tandcl.homemail.com.au/images/red.gif'
function writeit(no)
{ document.getElementById('image1').src=(no=='1') ? img1 : img2 }
</script>
</head>
<body onload="writeit('1')">
<a href="javascript:;"
onmouseover="writeit(2)"
onmouseout="writeit(1)"
onclick="history.go(-1);return true;">
<img id="image1" src="" />
</a>
</body>
</html>
 
S

Simon Blackburn

Thanks for your help guys, you steered me in the right direction. here is
what I come up with and it works.

<a href="javascript:history.go(-1)" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Try Again','','images/error2.gif',1)"><img
src="images/error1.gif" alt="Try Again" name="Try Again" width="138"
height="22" border="0" id="Try Again" />
 
D

duan

Trevor Lawrence wrote on 10/03/2008 20:51 ET
Simon
Here is a complete solution using Javascript, although Steve's solution ma
be bette

The images used exist on my site, so this will work as is. Subsitute you
own images

&lt;html&gt
&lt;head&gt
&lt;title&gt;Go Back Demo&lt;/title&gt
&lt;script type=&quot;text/javascript&quot;&gt
var img1 = 'http://tandcl.homemail.com.au/images/black.gif
var img2 = 'http://tandcl.homemail.com.au/images/red.gif
function writeit(no
{ document.getElementById('image1').src=(no=='1') ? img1 : img2
&lt;/script&gt
&lt;/head&gt
&lt;body onload=&quot;writeit('1')&quot;&gt
&lt;a href=&quot;javascript:;&quot
onmouseover=&quot;writeit(2)&quot
onmouseout=&quot;writeit(1)&quot
onclick=&quot;history.go(-1);return true;&quot;&gt
&lt;img id=&quot;image1&quot; src=&quot;&quot; /&gt
&lt;/a&gt
&lt;/body&gt
&lt;/html&gt
Trevor Lawrenc
Canberr
Web Site http://trevorl.mvps.or
Click to expand...
Hi Trevo

I have just come across this code and it does exactly what i need it too. I
there a way of getting rid of the blue outline that appears around the images?
 
R

Ronx

duan wrote on 13/02/2011 :
I have just come across this code and it does
exactly what i need it too. Is
there a way of getting rid of the blue outline
that appears around the images?
Click to expand...

Use CSS.
In the <head> of the page, example between
</script> and </head>, add

<style type="text/css">
img {border:none;}
</style>

This will remove borders from every image on the
page.

--
Ron Symonds - Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp/wf-menu.aspx
Microsoft has closed this newsgroup on Microsoft
servers - see
http://www.rxs-enterprises.org/fp/newsgroup-closure.aspx
for details of why and where to go next.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

HOW DO I MAKE AN IMAGE INTO A BACK BUTTON 2
rollover dropdown 1
Creating remote rollovers 3
FP2002 & ImageReadyCS (PhotoshopCS) Help! 9
Four issues with Dynamic Web Template 0
Action Button Rollover state 0
Custom Button Images 5
Restating it Help with Hit Counter, Please 2003 FP 6

Top