Breadcrumbs

[mikethedj4]

NOTE: I will not be discussing onClick in this tutorial, if you want to learn how it works you can head here.

So lets break this code down!

Code: Select all

<a href="http://codenstuff.com/" 
onMouseOver = "document.images['IMG'].src='starthover.png'"
onMouseOut = "document.images['IMG'].src='start.png'"
onMouseDown = "document.images['IMG'].src='stop.png'"
onClick="return false;">
<img name="IMG" src="start.png" width="65" height="32" border="0"></a>

<a href="http://codenstuff.com/" indicates a link, so when are button is clicked it'll head to whatever site that's displayed within the quotation marks.

onMouseOver = "document.images['IMG'].src='starthover.png'" indicates that an image called starthover.png is gonna replace another image that'll be embeded via HTML.

onMouseOut = "document.images['IMG'].src='start.png'" indicates that when starthover.png is hovered off of the image start.png will be displayed.

onMouseDown = "document.images['IMG'].src='stop.png'"> indicates when your mouse button is pressed on starthover.png it'll replace that image with stop.png.

<img name="IMG" src="start.png" width="65" height="32" border="0"> indicates that this is the starting image to be displayed.

</a> indicates that were closing our link.

Now let make it when we click our image it has an alertbox pop up saying Censored!

Now in order to this we can choose to have the alertbox pop on hover (onMouseOver), page load, when the mouse leaves the hovered image (onMouseOut), or when the hover image is clicked (onMouseDown, or onMouseUp). We're gonna have our alertbox pop up when we click on our hovered image (onMouseDown in this case).

So first find this line:
onMouseDown = "document.images['IMG'].src='stop.png'"

Lets take out the end quotation and replace it with a coma, so our code indicates that it'll when the mouse button in pressed down on the image starthover.png it'll still replace it with stop.png, but at the same time the code we embed after the coma will enable our alertbox to work.

NOTE: Because were making an alertbox on onMouseDown it won't change, but it's just a prime example for this tutorial so you guys understand onMouse Functions.

So far your onMouseDown code should look like this right now
onMouseDown = "document.images['IMG'].src='stop.png',

after that lets put down alert('Censored!')" to enable our alertbox.

This is what our code should look like so far:

Code: Select all

<a href="#" 
onMouseOver = "document.images['IMG'].src='starthover.png'"
onMouseOut = "document.images['IMG'].src='start.png'"
onMouseDown = "document.images['IMG'].src='stop.png',
alert('Censored!')"
onClick="return false;">
<img name="IMG" src="start.png" width="65" height="32" border="0"></a>

Now lets have it when you click the image, you have an alertbox pop up, and it'll prompt you if you want to go to CodenStuff, but were gonna need to add cancel, and ok buttons in order to do so.

In order for us to make this redirect alertbox were gonna need to remove the old alertbox code that's displayed above.

Now because were putting this as an OnClick function were gonna need to create a function, and we'll call it redirect.

So first lets open our scripting language.

<script type="text/javascript"
OUR ALERTBOX CODES WILL GO HERE

Now lets create a redirect function, called redirect (redirect can be called anything for ex. lets say I have it shoes, make sure towards the end of the tutorial when to get to embed the OnClick function to confirm it you state the function's name whether it's redirect, shoes, or whatever).
function redirect()

Now when the alertbox loads were gonna have it say, "Are you sure you wanna leave?", but before that were gonna need to open our script up, and end it at the end of the alertbox.

So lets open it with {, and then add var r=confirm("Are you sure you wanna leave?");.

r=confirm will replace the exclamation point image with a question mark. If you want the exclamation point back up, just replace r=confirm with r-redirect.

Your code should only look like this right now.

Code: Select all

<script type="text/javascript">
function redirect()
{
var r=confirm("Are you sure you wanna leave?");

<a href="#" 
onMouseOver = "document.images['IMG'].src='starthover.png'"
onMouseOut = "document.images['IMG'].src='start.png'"
onMouseDown = "document.images['IMG'].src='stop.png'">
<img name="IMG" src="start.png" width="65" height="32" border="0""></a>

Now lets add a code that when you click the "OK" button it'll redirect you to whatever website you'd like to be redirected to, for this tutorial I'm gonna choose CodenStuff.

So after var r=confirm("Are you sure you wanna leave?"); lets put down if (r==true), then lets open our script for the ok button, and then will need to close it, so lets open it with { again, and lets put down window.location="http://codenstuff.com/"; which indicates the redirection of the browser, and then } that indicates it closes the script for the redirection when the ok button is clicked. We now gotta close the script that was open from the question "Are you sure you wanna leave?" so lets put down }.

Your code should look like this so far.

Code: Select all

<script type="text/javascript">
function redirect()
{
var r=confirm("Are you sure you wanna leave?");
if (r==true)
  {
  window.location="http://codenstuff.com/";
  }
}
</script>

Now lets add our code we began with in the beginning of this tutorial, but right after onMouseDown = "document.images['IMG'].src='stop.png'" lets confirm our redirect function right after by adding OnClick="redirect()".

Your whole code should now look like this:

Code: Select all

<script type="text/javascript">
function redirect()
{
var r=confirm("Are you sure you wanna leave?");
if (r==true)
  {
  window.location="http://codenstuff.com/";
  }
}
</script>

<a href="" 
onMouseOver = "document.images['IMG'].src='starthover.png'"
onMouseOut = "document.images['IMG'].src='start.png'"
onMouseDown = "document.images['IMG'].src='stop.png'" OnClick="redirect()"
onClick="return false;">
<img name="IMG" src="start.png" width="65" height="32" border="0"></a>

Right now when you click the Cancel button nothing happens, but were gonna change that; were gonna have it so we click Cancel the one alertbox closes, but another one pops up saying "Good Choice!".

Remember the redirect code we put down?
{
window.location="http://codenstuff.com/";
}

Lets put down else right after it so now we can choose do embed our alertbox for the Cancel button.

After else lets open our code with { like before and then lets embed out alertbox with alert("Good Choice!"); and then it's time to close the code one last time with } once again.

Now are final code should look like:

Code: Select all

<script type="text/javascript">
function redirect()
{
var r=confirm("Are you sure you wanna leave?");
if (r==true)
  {
  window.location="http://codenstuff.com/";
  }
else
  {
  alert("Good Choice!");
  }
}
</script>

<a href="" 
onMouseOver = "document.images['IMG'].src='starthover.png'"
onMouseOut = "document.images['IMG'].src='start.png'"
onMouseDown = "document.images['IMG'].src='stop.png'" OnClick="redirect()"
onClick="return false;">
<img name="IMG" src="start.png" width="65" height="32" border="0"></a>

[mikethedj4]

There's some really nice alertbox's here using JQuery.

[zachman61]

thanks