Ok so I need some input on placing textual links to stay static to an image on a page..
The image is basically a cloud, with products branching out with logos and now textual links attached to each product.
what would be best way to go about this?
currently im thinking creating a div, setting the needed width and height.
Then from that. I will have the img positioned absolute within div, as well as the links all absolute positioned in same div...
does this sound about right?
Any other approaches to this?
<div id="subheaderhome">
<p class='hptext' id='wcp'> W</p>
<p class='hptext' id='rp'> R</p>
<p class='hptext' id='mp'> Meo</p>
<img id="shopsol" src="images/solshairpiece.png" />
</div>
Yes that approach will work but if you want the links to be positioned according to the image only,you should use position:relative over position:absolute.
position:absolute removes the element to be positioned from the normal flow of the document and places it in an exact location on the page.Meaning that the links in your case will remain in the same position even if you zoom in or out on your browser while the rest of the page changes in view.This will also make your page look messed up on a screen differently sized than yours.
I imagine you're creating an image with links. Here is another solution thinking out of the box a bit. Incorporate the link wording into the image design itself and use an imagemap to tell the browser what parts of the image are to be treated as clickable links. Then, the position of the links are in fact part of the image itself and you can skip over toying with CSS to get these links to behave properly.
First, you have the image tag. With the usemap attribute that must be '#mapname'. In this code, my map's name is 'home' so my usemap attribute is "#home".
<nav>
<img class="navbar" src="./images/navbar.gif" usemap="#home" alt="Home, Auto Service, Hours & Location, Contact Info, Image Gallery" />
Then, you write your map out in pixel pairs. On my page here, I have one long image of buttons rather than placing an image of the button 5 times, I made one image with 5 copies of my button. Each area tag is covering one rectangular (shape="rect") segment of the image. In the first one here, I am starting in the top left hand corner of the image at "0,0... (x,y). The rectangle's bottom right corner is 186 pixels to the right, and 40 pixels down from that first point, so it is ...186, 40" The href should be self explanatory to mean that those bounds link to it.
<map name="home">
<area shape="rect" coords=" 0, 0, 186, 40" href="index.html" alt="Mortensen Motors Homepage" />
<area shape="rect" coords=" 186, 0, 372, 40" href="auto_service.html" alt="Tullahoma Auto Service" />
<area shape="rect" coords=" 372, 0, 558, 40" href="hours_and_location.html" alt="Located in Tullahoma, Tennessee" />
<area shape="rect" coords=" 588, 0, 744, 40" href="contact_info.html" alt="Contact info" />
<area shape="rect" coords=" 744, 0, 930, 40" href="image_gallery.html" alt="Mortensen Motors image gallery" />
</map>
</nav>
So I used one image, and I made 5 links. This would be perfect for what you're doing because the coords="" attribute is based on the image's pixels by the image file, not by actual display size. Therefore, they do not stray from their intended areas of image coverage based on zooming.
Related
I found this piece of code on stackoverflow that would allow me to place a small image over a larger image (in my case a small lock to indicate the movie is unavailable)
<div style="position:relative;display:inline;">
<img src="_images/test.jpg" width="350" />
<div style="position:absolute;bottom:10px;right:10px;">
<img src="_images/lock.png" width="40">
</div>
</div><h3>Air</h3>
it all displays perfectly, but there is a split second where the AIR tag at the bottom displays first (and sometimes the lock image), before it all snaps into place properly. (The main image, the lock in the bottom corner of the image, then the h3 tagged Air at the bottom.)
Does anyone know the cause of this, and how one might fix it?
Thanks
One alternative is to place the src content in a data uri scheme. This will cause the images to load with the content. When you set src to a uri resource, the browser has to go out and get it. This causes the delay you see.
http://en.wikipedia.org/wiki/Data_URI_scheme
Ok I have a bit of an annoying problem. I am implementing a "more pictures" section at the bottom of a article view using expression engines grid system (version 2.7.3)here's my code
{story_images}
<a class="blok-img" href="{story_images:image}" data-lightbox="{story_images:desc}">
{exp:ce_img:single src="{story_image}" width="86" height="86" crop="yes" max="86" attributes='alt="{story_images:desc}" title="{story_images:desc}"'}
</a>
{/story_images}
This is cropping all my images as expected and the light box is working as expected, however the images that are being cropped are always the same image.
So, the cropped images (for arguement sake are called ONE, TWO, THREE)
ONE - looks as expected cropped at 86px, loads main image on click
TWO - the cropped image is the same as image ONE but loads it's original image on click
THREE - the cropped image is the same as image ONE but loads it's original image on click
I can only assume that CE Image is over riding the original variable but to be honest I'm at a bit of a loss, any help would be appreciated.
You have a small error with your syntax for the grid field, it's just missing the prefixed variable in CE Image's tag, it should be:
{story_images}
<a class="blok-img" href="{story_images:image}" data-lightbox="{story_images:desc}">
{exp:ce_img:single src="{story_images:image}" width="86" height="86" crop="yes" max="86" attributes='alt="{story_images:desc}" title="{story_images:desc}"'}
</a>
{/story_images}
User manual: http://ellislab.com/expressionengine/user-guide/modules/channel/grid.html
<img src="demo_usa.png" width="960" height="593" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#"onmouseover="this.style.backgroundColor='#00FF00';"
onmouseout="this.style.backgroundColor='transparent';"/>
</map>
Where is the problem with onmouse over friends?
I want to change the color when the mouse is over thea area shape
Thx verry much
An area element just specifies an area of an image, making it clickable. It does not set any rendering properties for that part of the image, so CSS settings on it are ignored.
To make the image change on mouseover, you need to use JavaScript code that replaces the entire image by a different one.
In a small website where the pages are only composed by a single image with multiple links using html map, I want to resize the images (smaller images) but it is extremely painful to resize all the images and change all the link coordinates.
<div style="text-align:center; width:586px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201110040649307" src="http://site.com/ui_prototype/login.png" usemap="#Image-Maps_5201110040649307" border="0" width="586" height="1162" alt="" />
<map id="_Image-Maps_5201110040649307" name="Image-Maps_5201110040649307">
<area shape="rect" coords="59,550,297,614" href="http://site.com/ui_prototype/main_menu.html" alt="" title="" />
</map>
</div>
What is the better solution to solve the problem?
Thanks
You may zoom/scale the div,
example(half size):
style="zoom:.5;-o-transform: scale(.5);-moz-transform: scale(.5)"
Here's a little lib that solves this problem.
https://github.com/davidjbradshaw/imagemap-resizer
I think the best solution would be to resize the images and then write a small script that will allow you to select a rectangle (or simply click 4 times on the image), prompt for entering and URL and then spit out the HTML for that rectangle. This way it would be much faster to generate the map.
If you see yourself doing this again in the future, it would be better to build the map with real links positioned with CSS, but with the top & left coordinates specified as percentages relative to the image. This way you should be imune to size changes (but not to changing the image entirely).
I have a lightbox that has one image, then some more images in the same set, but these are styled to be hidden, the only way you can see them is by clicking the first image (the only visible one) and activating the lightbox.
Is there a way of skipping straight to the second image in the lightbox instead of the image being clicked on being shown first,
This is what im working on:
http://yvonneestrada.com/taylor/gallery.php?id=5&start=3
Try setting a link on the first image that will link to the second one. It may look something like this:
<img src="1" />
<img src="2" />
<img src="3" />