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.
Related
As the title states I'm having a bit of trouble with an element on my 'work in progress' website.
I currently have an unordered list which provides square sections (with a different image and link in each) On a hover, the image changes opacity and the background color changes also.
The problem I'm facing is that while the cosmetic effects are all working fine, the link is not working on click. (However, the link does display in the bottom of my browser as 'followable' and right clicking allows for following the link through the options there.
The link for the element is http://www.techcom.co.nz/#myclients
and currently the only element with an attached link is the img for steam. (Column 2, Row 2)
Any help anyone can offer would be greatly appreciated.
Regards
Add the following code to your images...use javascript
example
<img src="" alt="" onclick='window.location="URL HERE"'>
please remember not to get the quote marks mixed because it will not work otherwise and looking at your source you have no URL the images should be going to apart from #
I don't understand exactly what's the problem.
The links on "my work" section are not working because the links to "#" (none) try to give them real url.
I'm sure I'm going to smack myself when someone points out what I'm doing wrong, but I cannot for the life of me figure out why I can't get an alternate text to appear when an image does not load.
I have the following code with obviously the wrong path to an image (to simulate the image not loading for some reason):
<form>
<input type="image" src="image/not.here" alt="Search"/>
</form>
However, I don't get a button with the text "Search" on it which is what I would expect.
Can I accomplish this?
Thanks!
jsfiddle: http://jsfiddle.net/kralco626/hd4Dy/4/
If you're using Google Chrome/Safari, the browser don't display the "Search" if it is longer than the img width.
There's nothing wrong with your code. Try add style="width: 700px; height: 400px" on your second input tag just to see that the text is there.
Further information:
http://blog.paciellogroup.com/2010/01/alt-and-title-content-display-in-popular-browsers/
PS: I.E. is showing the "Search" text.
You're missing a =:
value="Find"
Also, it depends on the browser. Some show the alt text in case the image is not available others don't; so it's not an error per se. Browsers for the visual impaired, for example, always show it.
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/
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 am facing bit strange problem with my application. I have an image
<img title="New (Alt+N)" alt="New (Alt+N)" src="images/icon_new.gif" tabindex="-1" id="Ax14490_image">
This code is found inspecting document withfirebug.
which is displaying properly but title is not coming on mouseover of that image. can any one help me out in this context.
I am using firefox 4.0 browser
In case anyone else finds this thread via a search, I was having the same problem as described by the original poster. Here's what turned out to be the cause, in my case.
My layout involved two div objects placed horizontally next to one another. One on the left, and the other on the right. The left div was set to have a width of 100%, although it's contents did not cover all of that space due to internal padding. the right div contained the img which was not triggering any mouse events (including the "title" attribute not working, but onMouseOver and onMouseOut also did not work.)
So this was due to z-ordering. The mouse events were instead being handled by the div object on the left, because it's 100% width encompassed the full browser window. Since the left div had a "position" attribute of "absolute", it could legally have it's z-value set, and so I set its z-value to "-1". This fixed the issue.
Yes, it works for me too.
However, here is a useful guide to the correct usage of both the alt and title tags:
http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Too Late..But Try This...This is working for me
<img src="images/icon_new.gif" title="New (Alt+N)" tabindex="-1" id="Ax14490_image">
src tag at the first.
Thanks
I know I'm way late to the party but things are radically different today (Dec. 2018) than they were when this post was created (Jun. 2011).
In case someone is having this problem with images not showing the tooltip of the title="" attribute, well, make sure you are not testing in Responsive Mode.
The title="" attribute obviously isn't going to work because Responsive Mode in browsers, at least in Firefox and Chrome, emulate touchscreen devices and the title="" attribute only works with a mouse pointer.
Yep, I know what you're thinking…