make html image area ‘coord’ blinking or glow … - javascript

i trying to make html image <area coord tag more clear to viewer. any javascript sample to make those coordinate blinking effect or similar as long as it each coord is clear to viewer?
p/s: problem with paste < area .that why you didn't see the full of my message.sorry repost

i haven't tested this as i don't have time right now but you should be able to make it stand out just with CSS, something like this:
area {
filter:Glow(color=#00FF00,strength=4);
text-decoration: blink;
}

Two slutions: one, overlay another image. The overlay image would be transparent except for the region you want to highlight, and with opacity set low enough to still see what is behind it. And two, use the real image as the background image to the aforementioned 'overlay' image (the overlay image must have the overlay region already be translucent instead of using css).
e.g. (version one)
<span class='image_container'>
<img id='base_image' src='base.png' >
<img id='overlay_image' src='overlayimage.png' usemap='#yourmaphere'>
<map name='yourmaphere'>
...
</map>
</span>
.image_container {
position:relative;
}
#overlay_image {
position:absolute;
top:0;
left:0;
opacity:0.5;
filter: alpha(opacity = 50);
/* text-decoration: blink; */ /*optional*/
}
e.g. (version two)
<img id='base_image' src='overlayimage.png' usemap='#yourmaphere'>
<map name='yourmaphere'>
...
</map>
#base_image {
background: transparent url(base.png) no-repeat scroll top left;
}

Related

How to make image change color while mouse is moving over?

First off, sorry for the weird title, I don't really know a better way of describing it.
Basically I want the image to change color while the mouse is moving (hovering) over it, but for it to stop when the mouse is still,
While the mouse is stationary, color doesn't change,
While the mouse is moving, color changes.
I know there is the hover attribute in CSS, but it only has 2 states, when the mouse is hovering over it, and when it is not, what i'm looking for is something a bit trickier.
Hopefully that explains it :/
Please try this:
document.getElementById("myDiv").onmousemove = function() {
//Set random background color
myDiv.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}
Demo:
document.getElementById("myDiv").onmousemove = function() {
//Set random background color
myDiv.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}
#myDiv {
width: 150px;
height: 150px;
background-color: #ccc;
text-align: center;
line-height: 140px;
}
<div id="myDiv">Hover ME !</div>
You can achieve this with CSS animations, using Javascript to toggle a class when the mouse moves over the image, or stops doing so.
The image will need to be wrapped within another tag, if it isn't already, and then a pseudo-element will need to be added to that tag, positioned to sit directly on top of the image, with an initial opacity of 0. We ensure the image is visible behind the pseudo-element by setting the mix-blend-mode property of the latter. When the mouse first moves over the image it is, optionally, converted to grayscale and the background-color of the pseudo-element begins animating. When the mouse stops moving, the timeout in the JavaScript adds a class to the parent element which sets the animation-play-state property of the pseudo-element to paused and, when the mouse is moved again, this class is removed.
You can refine & tweak everything in this (e.g., removing the image's filter, adding/removing keyframes, chaning the mix-blend-mode, adjusting the animation-duration) just by editing the CSS, no need to touch the JavaScript.
var figure=document.querySelector("figure"),
img=figure.querySelector("img"),
timer;
img.addEventListener("mousemove",function(){
clearTimeout(timer);
figure.classList.remove("paused");
setTimeout(function(){
figure.classList.add("paused");
},300);
},0);
*{box-sizing:border-box;margin:0;padding:0;}
figure{
display:inline-block;
position:relative;
}
img{
vertical-align:middle;
transition:-webkit-filter .25s linear 99999s,filter .25s linear 99999s;
}
img:hover{
-webkit-filter:grayscale(1);
filter:grayscale(1);
transition-delay:0s;
}
figure::after{
animation:colours 5s linear infinite;
bottom:0;
content:"";
left:0;
mix-blend-mode:overlay;
opacity:0;
pointer-events:none;
position:absolute;
right:0;
top:0;
transition:opacity .25s linear 99999s;
}
figure:hover::after{
opacity:.75;
transition-delay:0s;
}
figure.paused::after{
animation-play-state:paused;
}
#keyframes colours{
0%{background:#f00;}
16.667%{background:#ff0;}
33.333%{background:#0f0;}
50%{background:#0ff;}
66.667%{background:#00f;}
83.333%{background:#f0f;}
100%{background:#f00;}
}
<figure>
<img src="https://unsplash.it/500/500/?random">
</figure>
I'm posting here as I need almost something like this. I need to change the back ground position on each mouse move. Image is set as background, here is the image:
http://pbdlbd.org/ipositive/wp-content/uploads/2015/02/one10.jpg
And I want to move the background position on each mouse move. This image has 4 parts(height of each part is 523px) and first it will show the top portion and after mouse move over it will show the 2nd portion and on another mouse move it will show 3rd portion and after 4th part it will repeat for further mouse move over it. After mouse is removed from the image, it will show the default top portion of the image.
Something like this:
document.getElementById("#ipos .flex_cell").onmousemove = function() {
//Set background position 523px bottom on each mouse move
#ipos .flex_cell.style.background-position = center -523px (here i can't make it so that it changes to -1046px by code);
}
Here is the site
TIA

Using JavaScript so that background image always stays the same when scrolling (plus other inquiries)

I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/50/
I would like to insert a menu on the left side which will scroll down to different sections of the webpage which I will later add. I want the background map image to always stay in the same position when scrolling. I would like to make a section in the menu called "Portfolio" which will scroll down to different PNG images which I will insert. I would like for the user to be able to click on a PNG image and a new tab will open so that the user can better see the image.
I would also like my logo.png image to be displayed on the top-right hand corner of the page and be visible whenever the user scrolls up and down. (The logo cannot be currently displayed in the link because it is saved in my computer).
HTML:
<p class="text">text</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
.text{
color:white;
z-index:999;
position:fixed;
bottom: 10px;
right: 5px;
left:60%;
font-size:25px;}
</style>
JavaScript:
$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
You can easily apply your image as background image and fix it.
Example CSS:
body {
background-image: url('your_image.jpg');
background-attachment: fixed;
}
It will stay fixed but the page's contents will scroll like normal above that background image.
To put the logo in the top right corner and make it stay, you need to give it a position: fixed and the place it in the corner (with html or top/left/margins in css). You may also want to give it a higher z-index to ensure it stays on top. I would provide code example but I'm on my mobile right now.
Now that I'm back, here is some sample code to get you started.
#logo {
position: fixed;
right: 0;
top: 0;
z-index: 10;
}
Please see #Mischback's answer for CSS background-image.
Please see the very useful fancyBox.js utility with regard to your image inquery.
The fancyBox jQuery pluggin makes image manipulation and viewing Super Easy.
I will let someone else anwer how to fix/lock a logo to the top of the screen when scrolling.
I agree with Mischback but I would actually put the image in its own instead of the body.
HTML
<div id="image"></div>
CSS
#image {
background-image: url('image.jpg');
background-attachment: fixed;
}

Overlap equal sized images completely on top of another image

I am a beginning web developer and I want to overlap two images completely on top of one another. I am developing an application that checks to see if an answer inputed into the application is correct or not. For each answer, I will either display a checkmark or an "X" mark for the correct/incorrect answers respectively. To do this, I will use CSS and JavaScript:
CSS:
#checkmark { visibility: hidden}
#xmark {visibility:visible}
JavaScript:
function showCorrect(input, ans) {
if (input == ans) {
document.getElementById('checkmark').style.visibility=visible;
}
}
To do this, I just want to make the checkmark visible so that it covers up the xmark completely. What is the simplest way to overlay the images completely one on top of the either so that the checkmark covers the "X" mark?
How to make images overlap:
.imagewrapper {
position:relative;}
.imagewrapper img {
position:absolute;
top:0px;
left:0px;
}
.img1 {
z-index:1
}
.img2 {
z-index:2;
}
HTML
<div class="imagewrapper">
<img class="img1" src="img1.jpg" />
<img class="img2" src="img2.jpg" />
</div>
This will make the images overlap.
Zindex controls which image is on top.
Alternatively, you could also use display:none; and display:block; in your js or even change the z-index.
If you use display you wont need to overlap anything.

Changing image on hover

I need a menu consisting of images and the images should change when someone hover around it.
HTML
<div id="menu" >
<img src="images/about.png" alt="logo" />
</div>
CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks
As previously stated, no need for a JS solution.
Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:
HTML:
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
Here is a js/jquery solution
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)
Place this code just before the closing body tag,
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
place the class home in the img tag. Done. Works perfectly.
This works:
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<img src="lPr4m.png" alt="logo" />
</div>
</body>
</html>
(Image names changed for my convenience making the page.)
Remove the img tag, and set the width and height of #home (and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt of the image would be (for accessibility purposes), and then set the text-indent property so it's moved offpage.
Currently, when you hover, it's changing the background image, but the img tag is on top, and it always will be.
HTML
<div id="menu" >
Home
</div>
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}
you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above
You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.
you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index.
are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
// define your container element
#nav-home {
margin: 20px 5px;
height: 15px;
width: 40px;
}
// use a descendant selector to style the <a> tag
#nav-home a {
background-image: url("/images/buttons-nav.gif");
display: block; // THIS IS VERY IMPORTANT!!
background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
height: 15px;
}
// this is where you change the position of the background for the hover state
#nav-home a:hover {
background-position: -20px 0; //this moved it 20px to the right
}
and your html code would look like this:
<div id="nav-home"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;">
<!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.
And now for the simple way:
<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>
This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.

HTML Image Rollover - Image isn't fully loaded before rollover?

I have an image (in the top left as a home link), and I use the CSS :hover to change the image upon rollover.
The problem is, the image takes time to load the first time I rollover it. There's a temporary blank space, and you see the image incrementally load. It takes about a second, but it's annoying.
How can I fix this so the rollover is seamless? Is there a way to preload the image?
There's two options I can think of, off-hand:
css image sprites, or
placing the :hover image in a hidden div elsewhere in the page.
1, sprites:
For a CSS Sprite, have one background image for the 'home' link, and simply change its position on the :hover:
#home {
background-image: url(http://example.com/spriteOne.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
#home:hover {
background-position: 0 200px;
}
This does require set heights for the elements with the css-sprite background, though.
2, hidden preloading elements:
#home {
background-image: url(http://example.com/bg.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
#home:hover {
background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
display: none;
}
<div id="preload">
<img src="http://example.com/hoverBg.png" />
</div>
1. Answer:
Use CSS Sprites
2. Answer: Or create something like this:
<a href="link.html">
<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />
<img alt="imagehover" src="images/image.png" class="hover" />
</a>
And the CSS:
img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}
A method that I have found works really well for rollovers is using CSS sprites, i.e. using an image that contains both the original and rollover versions of the image. That way both versions load at the same time, and changing between them is just a matter of changing the background-position style.
One way to do it is to add an invisible image to your page, with the same URL. So by adding the following to the beginning of the documents body, you actually instruct the browser to load this image as soon as possible.
<IMG src="rolloverImage.png" style="display:none">
While this tag remains a part of your document, it is not shown or even rendered because of the "display:none" settings. You can even listen to its load event and remove the tag completely from the DOM once it is loaded, to keep the "garbage" out of the document. Once an image is loaded to memory, it is automatically reused every time you refer to the same URL, so once you set the source of the other image to the same URL, it will be loaded from memory.
Hope that helps,
Kobi
Put the image in a div with a style set to { height: 0; overflow: hidden; }, that should make the browser preload the image.

Categories

Resources