HTML hyperlink with mouse over image - asp.net

I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this


That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.


You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover


you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!

Related

CSS image over JS animated image

I created following simple website. I have Starfield and galaxy pictures. Starfield is animated by JS code. Stars are moving. But when I place Galaxy over starfield with CSS code stars stop moving.
Below I placed JS code and HTML code without placing galaxy over starfield. How can I place one over another with stars moving?
Regards
Piotr
<head>
<meta charset ="utf-8">
<title> Galaktyka</title>
<script src ="Code17.js"></script>
<style>
#galaxy{
display: block;
margin-left: 0;
margin-top: 0;
}
#star{
position: relative;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
window.scrollTo(0,0);
}
</script>
<style type="text/css">
body {
overflow: hidden;
}
</style>
<img id="galaxy" src="Galaktyka.jpg" style="width: 70%">
<img id="star" src="starfield.jpg">
</body>
And below JS
window.onload = function(){
let image = document.getElementById("star");
imageLeft = -175;
setInterval(move, 100, image);
}
var motion = true;
function move() {
if(motion) {
let image = document.getElementById("star");
imageLeft = imageLeft + 1;
image.style.left = imageLeft + "px";
if (imageLeft == 0) {
motion = false;
} else {
let image = document.getElementById("star");
imageLeft = imageLeft - 1;
image.style.left = imageLeft + "px";
}
if (imageLeft == -175){
motion = true;
}
}
}

Custom cursor not supported in Edge?

if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
var myCursor = document.createElement('img');
myCursor.src = 'cursor.png';
myCursor.style.position = 'absolute';
document.body.appendChild(myCursor);
document.addEventListener('mousemove', function(e) {
myCursor.style.left = e.pageX+'px';
myCursor.style.top = e.pageY+'px';
}, false);
}
body{
padding:0;
margin:0;
background-color: #19321D;
color: #53CC66;
line-height: 1.5;
font-family: FreeMono, monospace;
cursor: url(cursor.png), pointer;
}
a{
text-decoration: none;
color: #53CC66;
}
ul{
text-decoration: none;
list-style-type: none;
}
#header{
text-align: center;
border-bottom: 3px solid #53CC66;
margin-bottom: 100px;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
line-height: 1;
}
h1, h2, h3{
color: #53CC66;
font-family: FreeMono, monospace;
font-size: 15px;
}
a{
cursor: url(cursor.png), pointer;
}
a:hover {
cursor: url(cursor.png), pointer;
color: #19321D;
}
li:hover{
background-color:#53CC66;
color: #19321D;
}
li:hover a{
color: #19321D;
}
<html>
<head>
<title>Getrate|Command promph </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles15.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>DAVID SECRET INDUSTRIES UNVERIFIED SYSTEM</h1>
<h2>COPYRIGHT 2015 - 2050 ALL RIGHT RESERVED</h2>
<h3>- SERVER #1 -</h3>
</div>
<ul>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.3.8.9.84.113.21.73</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.4.8.9.84.113.21.74</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.5.8.9.84.113.21.75</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.6.8.9.84.113.21.76</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.7.8.9.84.113.21.77</li>
</ul>
</div>
</body>
<script src="wow.js"></script>
</html>
I just thought, is there any possible way, to make custom cursor, that works on microsoft edge? On my website, i used this:
body{ cursor: url(cursor.png), pointer;}
but in microsoft edge, it is not working...
Any ideas how to solve this?/Is there any other way?
So.... after small recode, my website looks like this, see the fiddle and try, it is not working yet...

This property is not supported yet : http://caniuse.com/#search=cursor
This property is now supported : caniuse.com:cursor:url()

As Charaf mentioned: the property isn't yet supported in Edge. If your project requires a solution, you can sort of mimic the behavior with JavaScript.
JavaScript:
if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
var myCursor = document.createElement('img');
myCursor.src = 'cursor.png';
myCursor.style.position = 'absolute';
document.body.appendChild(myCursor);
document.addEventListener('mousemove', function(e) {
myCursor.style.left = e.pageX+'px';
myCursor.style.top = e.pageY+'px';
}, false);
}

I made a library called CursorJS for you. You can check it out here. If you scroll to the bottom of the JavaScript code, you can find initializing code:
/* Enable lib with cursor image src */
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));
In your case just do the following:
/* Enable lib with cursor image src */
CursorJS.enable('./cursor.png');
CursorJS.addEl(document.body);
Customization
CursorJS has a mouseOffset variable. It repesents difference of mouse position and position of image. For example, if I set it to
mouseOffset: {
x: 50,
y: 50
},
The mouse will be 50px off. The reason why I made this variable is that custom mouse was kind of "blinking", try to set it to {x:1,y:1} ;)
Live example
var CursorJS = {
img: new Image(),
els: [],
mouseOffset: {
x: 5,
y: 5
},
addedImg: false,
checkForIE: function() {
return (/MSIE/i.test(navigator.userAgent)
|| /rv:11.0/i.test(navigator.userAgent));
},
setDisplay: function() {
this.img.style.display =
this.els.indexOf(true) > -1 ? null : 'none';
},
getMouseCoords: function(e) {
var mx = 0, my = 0;
if (this.checkForIE())
mx = event.clientX + document.body.scrollLeft,
my = event.clientY + document.body.scrollTop;
else
mx = e.pageX,my = e.pageY;
if (mx < 0) mx = 0;
if (my < 0) my = 0;
return [mx, my];
},
mouseOver: function(e, id) {
this.els[id] = true;
this.setDisplay();
var coords = this.getMouseCoords(e);
this.img.style.left =
(coords[0]+this.mouseOffset.x) + 'px';
this.img.style.top =
(coords[1]+this.mouseOffset.y) + 'px';
},
mouseOut: function(e, id) {
this.els[id] = false;
this.setDisplay();
},
mouseMove: function(e) {
var coords = this.getMouseCoords(e);
this.img.style.left =
(coords[0]+this.mouseOffset.x) + 'px';
this.img.style.top =
(coords[1]+this.mouseOffset.y) + 'px';
},
addEvent: function(el, name, func, bool) {
if (el == null || typeof name != 'string'
|| typeof func != 'function'
|| typeof bool != 'boolean')
return;
if (el.addEventListener)
el.addEventListener(name, func, false);
else if (el.attachEvent)
el.attachEvent('on' + name, func);
else
el['on' + name] = func;
},
addEl: function(el) {
var evts = ['over','out','move'],
id = this.els.length;
this.els.push(false);
this.el = el;
this.addEvent(el, 'mouseover', function(e) {
this.mouseOver(e, id) }.bind(this), false);
this.addEvent(el, 'mouseout', function(e) {
this.mouseOut(e, id) }.bind(this), false);
this.addEvent(el, 'mousemove', function(e) {
this.mouseMove(e) }.bind(this), false);
if (typeof el['style'] != 'undefined')
el.style.cursor = 'none';
},
enable: function(src) {
this.img.src = src;
this.img.style.display = 'none';
this.img.style.position = 'absolute';
this.img.style.cursor = 'none';
this.addEvent(this.img, 'mousemove', function(e) {
this.mouseMove(e) }.bind(this), false);
if (!this.addedImg)
document.body.appendChild(this.img),
this.addedImg = true;
}
}
/*** INITIALIZE ***/
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));
.myElement1, .myElement2, .myElement3 {
width: 150px;
height: 150px;
border: 1px solid gray;
display: inline-block;
}
<div class="myElement1">added</div>
<div class="myElement2">not added</div>
<div class="myElement3">added</div>
Hope that worked! Have a nice day :)

Chrome Extension - iFrame auto-height

I have created an iFrame in my Google Chrome Extension popup and applied CSS so it has no border and height: 100%.
However, it appears with a limited height and shows a vertical scrollbar.
How do I set it to adjust to the height of the loaded HTML page?

This will work, source here.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Google polygonal map background color transparent, surrounding area semi-transparent overlay

I'm trying to replicate something similar to the following map, where the polygonal area is transparent and the surrounding area is semi-transparent:
Can anyone help with this?
Here's the original:
https://energyeasy.ue.com.au/outages/powerOutages

Using some CSS and a large 512 x 512px png I have managed to emulate what I wanted to achieve.
I'm sure there would be more accurate methods but this has worked for me.
http://www.syn-rg.com.au/Development/United-Energy/mg_map/MG_Area_map_02.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas {
background-color: #EAEAEA;
border: 1px solid #CCCCCC;
height: 400px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 532px;
}
#map_canvas div div div div div img{ border:1000px solid black;margin:-1000px -1000px;}
/*#map_canvas div div div div div div div{ background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.5);}*/
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7UaoyrY4KyoW1iEU0KFo0ZOxH5w30oZ8&sensor=true"></script>
<script type="text/javascript">
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var myLatLng = new google.maps.LatLng(-37.815676, 145.449005);
var myOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var swBound = new google.maps.LatLng(-38.269876, 144.842405); // Latitude, Longitude = 182.749 or 107.183 or 108.4443 or 107.77615
var neBound = new google.maps.LatLng(-37.161476, 146.249005); // -0.5542, +0.7033 = 256px
//var swBound = new google.maps.LatLng(-37.783, 144.966);
//var neBound = new google.maps.LatLng(-37.225, 145.66930);
//var swBound = new google.maps.LatLng(62.281819, -150.287132);
//var neBound = new google.maps.LatLng(62.400471, -150.005608);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
// Photograph courtesy of the U.S. Geological Survey
var srcImage = 'images/mg_map_full.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
function USGSOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function () {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = "none";
div.style.borderWidth = "0";
div.style.borderColor = "red";
div.style.position = "absolute";
div.style.opacity = "0.3";
// Create an IMG element and attach it to the DIV.
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = 'absolute';
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
USGSOverlay.prototype.draw = function () {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
USGSOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</body>
</html>

Different behavior pop-up window css

Code below works good on local computer, but on remote server pop-up window doesn't consider scroll width and appears on the top of the page even when i scrolled the page up to the bottom. Problem appears only in IE and only on remote server. Files are the same. What should I check?
HTML
<div style="position:absolute;">
<div id="a_div">
123
</div>
</div>
CSS
#a_div {
display:none;
position:fixed;
width:850px;
top:35px;
border:1px solid #B1B8C7;
background:white;
z-index:3000;
}
JS
function showaDiv() {
var div = document.getElementById('a_div');
var width = document.body.clientWidth;
if (div) {
div.style.left = Math.round((width-850)/2)+'px';
div.style.display = 'block';
document.getElementById('a_bgdiv').style.display = 'block';
}
}

Try this fiddle if you want to center it vertically
function showaDiv() {
var div = document.getElementById('a_div');
var width = document.body.clientWidth;
var height = getDocHeight();
if (div) {
div.style.left = Math.round((width-850)/2)+'px';
div.style.display = 'block';
div.style.top = Math.round((height-div.clientHeight)/2)+'px';
//document.getElementById('a_bgdiv').style.display = 'block';
}
}
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
Just added the top.

Resources