I have an image with a "Visit" button on it that is image mapped with HTML code, it has a roll over effect so that when you put your mouse over the "visit" link, it shows a glow version of the visit button.
But right now the code is not correct, the rollover effect replaces the original image with the glow version image, I simply want the glow version to overlay the original version at the same exact coordinates that are in the html code below: coords="52,63,145,100"
I don't want it replace the whole image. And I want the glow version to maintain its normal size. This is the code so far:
<div style="text-align:center; width:200px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201304212133558" src="http://www.image-maps.com/uploaded_files/3201304212133558_example78.png" usemap="#Image-Maps_3201304212133558" border="0" width="200" height="200" alt="" />
<map id="_Image-Maps_3201304212133558" name="Image-Maps_3201304212133558">
<area shape="rect" coords="52,63,145,100" href="yahoo.com" alt="visit!" title="visit!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://s15.postimg.org/a71gazzzr/visit_glow.pngmage-maps.com/';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://www.image-maps.com/uploaded_files/3201304212133558_example78.png';" />
<area shape="rect" coords="198,198,200,200" href="http://www.image-maps.com/index.php?aff=mapped_users_3201304212133558" alt="Image Map" title="Image Map" />
</map>
</div>
Here is a live demo.
You could achieve this what you're looking for by removing this code all together and creating the both the button and the glow-hover effect with CSS.
The issue with your current code is that that method of rollover effect, ie image replacement via mapping, is very cumbersome and out-of-fashion, so to speak.
The web is literally covered in resources in regards to CSS and even HTML, and I would suggest looking into them.
For your query in particular, check this out: http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
i am going to do my best here to convince you to rethink what you're doing. I know you want an answer to your question but the truth is, I dont think theres a way to do it. The problem is the original image is one thing and the rollover button is another thing. When this was the norm you had to create the original button and rollover button to be exactly the same size, and dpi in order for it to work and look right. If you wanted to have something in the middle of the image you had to slice out the part you wanted to change and use css and divs or (God Forbid) a table, to make it work.
In the year 2013, you can accomplish everything you're looking to do with CSS3 and NO images at all.
this site will make them for you and just give you the code when you're done.
http://css-tricks.com/examples/ButtonMaker/
this one used images incase you wanted something a little more special than what text can provide,
http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
Good luck
EDIT: I am sleepy so when I was telling you what was wrong with your original stuff I dont think I did a good job. The original image is a huge thing with a border and a small button in the middle. The hover button is just the small button. You're thinking you can using a hover effect to replace just the small button in the middle with the overlay image. This might be possible with javascript but I am not really sure you can do this with a hover effect. If this is possible its not a good way to do it.
You're literally replacing the image in the tag, so you're not going ot be able to show two pictures simultaneously unless you load the base image into a separate element.
One option would be to change the : add background-image: url(http://www.image-maps.com/uploaded_files/3201304212133558_example78.png); to the style attribute. (and, for neatness, you could replace the base image in the tag with a transparent png).
This isn't the right approach though, for a number of reasons. Images harm SEO, they are slower to load, some browsers have problems with png transparency, google translate won't translate them, etc, etc, etc.
Besides, you can do all this in css:
http://jsfiddle.net/as2003/AbVTK/
Related
I have made a HTML page with an image map over an image.
This image spans over multiple screens and I want to add anchor links to area of the image.
I tried to use something like:
LinkToArea1</br>
and
<area id="Area1" shape=rect coords=X1,Y1,X2,Y2 href="http://www.perdu.com" title="Perdu"/>
under the map tag,
but while using the same id under the img tag works, this won't do for an area.
What are the html or css solutions to manage this, apart of cutting the images in pieces
(this is indeed the evident solution but it is not possible, I have thousands to do and the cutting would have to fit what has already been done with the maps - that are provided to me by a third party)?
Thanks by advance
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!
I'm not up to date on the latest CSS improvements, so I figured it was worth asking;
An <img> element is nicely written as <img src="/url.png" />, with the height and width auto or specified. I like CSS sprites for their obvious loading speed advantage, yet hate writing out all that CSS for it. Is there, or will there ever be, a syntax like <img src="/url.png" Xpx Ypx />, where X/Y represent a location shift similar to CSS's background-position?
I understand that it would be wonky with regards to image dimensions, as they scale in HTML (as opposed to cropping, like a div with a background image would).
Is this possible, or am I just being lazy?
Can't imagine that ever coming to pass, and even if it did you'd have the usual cross-browser issues for years. There are numerous services that can work out the CSS/coordinates for you - e.g. SpriteCow.
There isn’t anything in HTML like that at the moment.
You could use inline CSS on the image tag, if you’ve got a 1-pixel transparent gif or png handy:
<img style="background: url(/url.png) -Xpx -Ypx;" src="/1pix.gif" />
But you’ll need to set the width and height of the image element so that the sprite background is visible.
You could avoid the need for a transparent image file by including it directly in the <img> tag as a data URL:
8-bit PNG
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN%2BAAAAAXRS%0ATlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII%3D%0A">
GIF (smaller)
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%0A">
(See http://jsfiddle.net/r727j/1/)
But obviously we’re getting into fairly ugly territory here. (And I couldn’t swear that the data URL will work in IE 6.)
The sprite itself is generally used to combine many small images into one large image. This is done not only save precious loading time and bandwidth, but also to keep your site structure clean and manageable.
example
{background-position:0px -143px;} /* what ever*/
I am designing my first website.
I have designed a button image in gimp and saved it as a jpg.
I want to use this button for my navigation buttons on the site. Should I make a separate image(jpeg) for each button or is it possible to just use one image and then overlay text on top of the images on the page using HTML? What's the best practice here?
Usually in this case you use just CSS by setting background property of elements that should be your navigation buttons.
For example you could have a ul:
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
and then just style it in you css by using background-image or similar styles, take a look here for some examples..
You're asking a question more about design than about coding. If you can implement your desired design by developing a single button background and then overlaying text in a standard font, do it! More broadly: don't put text in an image if you're just using a standard font.
On the other hand, if you want a fancy swirly font that can only be depicted in an image, you'll need to create a specialized image for each button with that button's text.
In that case, be sure to insert the image purely with CSS. Never, ever embed an <img /> tag with a textual button on a page.
Definitely reuse the images and overlay text. For ideas on how to do this, look at this tutorial:
Image button overlay text tutorial
Also, you mentioned using jpg. Consider using PNG instead for the button images, unless they are "real world" images. For simple gradients and solid colors, PNG is the way to go.
I havent seen the image but I generally try to Use CSS for as much of the graphical design as possible. Button generally tend to be very simple in design. However if you must use an image you can assign a background to a tag and then use text in the tag. Example would be to assign a background to a
<button class="myButtonClass">MyButtonText</button>
<style>
.myButtonClass {
//enter your button style here.
}
</style>
Depends on how you've designed you site, as always theres loads of ways to do everything.
If your buttons are just static i would recommend using images, theres no harm doing it like this.
<span>Your button</span>
then you can use the css to set the image background.
.home{display:block; height:20px; width:40px; background:url(image.gif);}
and your also gonna need to hide the text in the span.
.home span{display:none;}
Theres no harm in using simple text either, most of the time its personal preference.
Just leave ou the .home span{display:none;} and replace it with something to centre the text in the button.
As mentioned in another answer its also good practice to wrap your images in list items. Might sound wierd at first. But in practice its the best way.
you can put the image as backgroud...