dollar Posted April 4, 2009 Share Posted April 4, 2009 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 More sharing options...
Ingolme Posted April 4, 2009 Share Posted April 4, 2009 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 More sharing options...
chibineku Posted April 5, 2009 Share Posted April 5, 2009 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 More sharing options...
pizzaguy Posted April 5, 2009 Share Posted April 5, 2009 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... Link to comment Share on other sites More sharing options...
Shade Posted April 5, 2009 Share Posted April 5, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.