Jump to content

How To Show Image As A Alert?


dollar
 Share

Recommended Posts

I want to show image as a alert instead of usual text. Is there any way to do that?This is not working:

<input type="button" onclick="alert(<img src='http://w3schools.com/images/h_logo.gif' />"value="Click me to get image">

Edited by dollar
Link to comment
Share on other sites

You can only alert text.If you want to display an image, you would have to make a fake alert, by creating a <div> element that is floated in front of the page and has a link to make it disappear. If you wanted to go further, you could use mousedown, mousemove and mouseup events to let the <div> be draggable.

Link to comment
Share on other sites

You can only alert text.If you want to display an image, you would have to make a fake alert, by creating a <div> element that is floated in front of the page and has a link to make it disappear. If you wanted to go further, you could use mousedown, mousemove and mouseup events to let the <div> be draggable.
I'm mostly posting here so that I remember to come back to this idea...I've not yet heard of floating divs in front of a page...eet ees eenteresteeng...
Link to comment
Share on other sites

When it comes to the div option, you could either do it yourself, or if you want a pre-made script to just make the images pop up and do not care if it looks like an alert popup you could try shadowboxor you could just make all image links pop up in a new window...

Edited by Pizzaguy
Link to comment
Share on other sites

simple:create a <div> called "myalert" , it contains an <img> and an <a>close it</a> link,which calls the hide function.from css, set its position to be absolute, in center of screen, and display:none to hide it.create a javascript with two functions, one shows the alert, other hides it. they do this by togglingits css property display:none or display:block.finally put one more link to show the alert onclick="showit()".whipped up a piece of code for this one :

<!DOCTYPE html><html><head><title>Untitled Document</title><!-- --------------------------------------CSS---------- --><style type="text/css">a {	color:#FFFFFF}body {	background-color:#999999;}#myalert {					 /* style for our alert window */	background-color:#444444;	border:solid 5px #000000;	position:absolute;  /* places it anywhere */	top:25%;	left:25%;	width:50%;	height:50%;	display:none;   /* makes it hidden */	z-index:99;	 /* on the top of everything*/}</style><!-- -----------------------------------script------ --><script type="text/javascript" >var myurl;function showit(myurl){			   /* myurl receives passed value of image addres */   document.getElementById('myalert').style.display = "block";		   /* shows the alert */   document.getElementById('myimg').src = myurl;		  /* sets image source as passed to this function */	}function hideit(){  document.getElementById('myalert').style.display = "none";			  /* hides the alert */ }  </script><!-- ------------------------------------HTML--------- --></head><body><a href="#" onClick="showit('image address')" > Show alert </a> <!--the alert div--><div id="myalert" > <img id="myimg" src="http:\\" width="100%" height="90%" border="1px"  align="top" > <a href="#" onClick="hideit()" > Close this </a></div></body></html>

works in firefox, IE7 and opera.

Edited by Shade
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...