Jump to content

How To Show Image As A Alert?


dollar

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">

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

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...