Alright, so I was wondering if there was an alternative, lightweight way to creating an image map.
Basically, I want to take this image:
And have the sections of the diagram light up when they are hovered over, kinda like this (I've mocked it up in photoshop):
The other sections (which I haven't named yet) should be able to do the same. Also, I'd like to be able to use javascript later to have sliding links appear from behind those sections (I roughly know how to do that now, so I'm okay that)
Does anyone have any suggestions? Just a general direction on what to search for would be great.
Map tag would be good and it is not actually heavyweight as it does not require any external plug-ins.
However, since you just want a general idea: Once due to some error, I wasn't able to use map tag. So I split the original image into different images (positioned them as the original image was) and then used events on separate parts.
Tiresome, but a workaround.
Circles are easy to do with CSS. You can start with something like this :
width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
FIDDLE
Hope it help.
It's difficult for me to achieve that white shape in the middle, but here's a simple try:
http://jsfiddle.net/w8zTz/
Only with three div and a few css:
HTML
<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>
CSS
div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}
(Z-index is for stack the div behind the other and reach transparency).
Hope this helps :)
Take two images
1)normal image
2)the particular section higligthed when hovered image
<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
</map>
<script>
function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
}
function onout6(image2)
{
document.getElementById('originalimage').src=image2;
}
</script>
Here when you hover on the co-ordinates, the image changes to hoverimages and on mouseout it changes to original image.
Related
i am currently making a website that s designed to be a test. It has an image and an image map, i am trying to use JavaScript to get the clients screen size and resize the image to fit the clients screen size but when i do the image map is not were i need it to be. Is there a way to get the image map to stay in the same place with out having to "physically" resize the image in paint or Photoshop. My site (with out getting the clients screen size). Basically i am trying to make the image fit their screen so its easier to navigate the test,its realistic, but without screwing up my image map positioning. Any hep would be much appreciated.
`<map name="desktopmap" >
<area onclick="correct();" shape="rect" coords="1,575,38,597" href="OS2.html" >
</map>
<img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`
Thank you.
What you can do instead is use absolutely positioned divs with percentage-based coordinates and dimensions, and hook your click events into those. That should allow your invisible "buttons" to scale nicely with the image. Image maps are a bit outdated and not very flexible.
Example fiddle (updated with correct/wrong functions):
http://jsfiddle.net/3ZLeK/1/
Example new HTML structure:
<div class="wrap">
<img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
<div class="box box1"></div>
</div>
Example new CSS:
.wrap {
position: relative;
overflow: auto;
}
.bg {
float: left;
width: 100%;
}
.box {
position: absolute;
cursor: pointer;
}
.box1 {
top: 95%;
left: 0;
width: 7%;
height: 5%;
}
In the fiddle I also changed your inline Javascript handling to use event handlers, because those attribute handlers are outdated as well.
You may use mediaqueries to rescale/zoom your map .
two experimental test here : http://dabblet.com/gist/5586117 and http://codepen.io/gcyrillus/pen/AJHmt
If you follow this idea, and think of using zoom + javascript instead of mediaquerie to include older browser such as IE , beaware of that some version of IE understands both : transform:scale(x); and zoom:X; . make sure you do not aplly twice a rescalling in that case.
Basicly , coords are pixels coordonates, a scaling is the only way, unless you modyfy each values of each coords :)
... not too sure my english is clear/correct enough.
I have an H1 tag that contains text and an image. The tag looks something like this:
<h1 id="title">My Title
<img class="image" src="/icons/image.png">
</h1>
I have some CSS:
#title{
position:absolute;
font-family:"Papyrus";
color:purple;
font-size:80px;
left: 42%;
margin-top:-.1%;
}
.image{
position:absolute;
margin-left:-120px;
margin-top:35px;
}
I have nested these two so that the image stays with the h1 tag as the screen is re-sized.
What I would like to do is have two different JQuery effects run simultaneously; however, the ".image" portion is getting caught up in the effect of the "#title". The Jquery looks like this:
$("#title").hover(function(){
$("#title").effect("puff","slow",function(){
$("#title").fadeIn()});
$(".image").effect("bounce","slow");
});
What appears to happen is that the image class gets pulled into the puff effect which I don't want. It then does the bounce effect but it does it far away from its normal spot. I think it does this perhaps based on the the extended puff location but I am not sure. Regardless, I want the puff effect to only act on the #title and not the .image portion.
Thanks.
You could move the image outside of the heading and into a div. You might need to apply some additional styling, but this is probably your best option.
<div>
<h1 id="title">My Title</h1>
<img class="image" src="/icons/image.png">
</div>
Do not nest them. Instead use absolute positioning to make them appear to be overlapped.
I am trying to highlight a section of a .png file using either HTML/CSS/JavaScript/jQuery. I am able to display the image, but am not sure how to highlight a particular section (I don't wish to highlight the entire image).
At the moment, the html code that I have to display the image is quite simply:
<img src="myImage.png" />
Nothing too extravagant.
It is imperative that the portion that is to be highlighted remains visible to the user. Ideally, I want the highlighting to be a set of controls that can be turned on/off by calling a particular method/function. Is this possible, and if so, how? Do I need to specify the exact coordinates of the region I wish to highlight (e.g. x, y, length, width)? I am ok with this, it's just that I'm a web design novice, and honestly don't know how to do this.
You could do this vis something along these lines: jsFiddle example
HTML
<div id="container">
<img src="http://www.placekitten.com/200/200" />
<div id="highlight"></div>
</div>
CSS
#container {
position:relative;
}
#highlight {
position:absolute;
width:75px;
height:75px;
top:75px;
left:75px;
background: rgba(255, 0, 0, 0.4);
}
This example positions a div above an image within a container, and sets the background to be partially transparent using rgba. You can set the position, colors, opacity, etc. via JavaScript.
Do you know how to make the source image of an img tag transparent so that one can see the background image through the src image?
Say I have this html:
<img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" />
I want to somehow target the source image and set the opacity to i.ex. 0.7 .
With jQuery I could copy the src, height and width of the image and manipulate the markup into something like this:
<div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;">
<div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"></div>
</div>
But does anyone have a better/simpler suggestion for how to do make this happen? Preferrably without manipulating the markup.
I don't think you can do this with just an <img/>. Try:
<div class="image-wrapper">
<img src="my_image.jpg" height="200" width="300"/>
</div>
.image-wrapper {
display: inline-block;
background: url(img/bg.jpg) repeat;
}
.image-wrapper img {
vertical-align: top;
opacity: 0.7;
}
and a fiddle.
You could try wrapping the image in a <span></span> and setting the background on that, then reducing the transparency of the image. It'd be less awkward than replacing the image with divs.
You could have the image in a div instead of a background, then change the z-index, then you could target it directly in the css.
Why not just make the image partially transparent in an editor, then save as PNG (since JPG doesn't support transparency)? That'd be a lot easier than trying to code a solution.
I can't recall what the process is called but I need a means of creating like a hotspot zone on a web page, so that, when the user hovers there mouse pointer over this zone, the cursor changes to a pointer, which will then allow the user to go to a particular site.
Please note that I am not referring to a simple anchor tag around an image, I am specifically after a means of determining coordinates on a web page which will then turn this area into a hover zone.
A very simple solution is to position an anchor tag to a specific point on the page.
<a id="hotspot" href="#!link">hidden hotspot</a>
#hotspot {
position: absolute;
width: 100px;
height: 100px;
background: transparent;
display: block;
top: Xpx;
left: Xpx;
text-indent: -10000px;
}
Sounds like a simple anchor that is absolutely positioned
Although I'd recommend the absolutely positioned links as mentioned above, it sounds like you're looking for an image map.
Others have suggested positioned anchor tags, but since you mention coordinates, it almost sounds like you're looking for an old-school imagemap. It's ancient, but if you want some arbitrary shapes, maybe it's an option. Remember these?
<img src="yourpic.png" width="500" height="400" usemap="#themap">
<map name="themap">
<area shape="polygon" coords="0,0,100,0,100,100,0,100" href="..." id="foo" />
<area shape="circle" coords="150,30" href="..." id="bar" />
</map>
I don't know the specifics of your requirement, but maybe you could throw something together with a big blank image, define a bunch of polygons and/or circles, add some hover behaviors to each area, and go from there.