So I'm very confused and never seen something like this happen before. I have a simple link displaying an img in html. When I load my page, the img does not display. There is no CSS applied to the link or the img. Here's my code, I just need somewhere to start because I have no clue what the problem is.
<li>
<a class="dropDownGif" id="dropDownGifLink" href="#"><img src="../../images/darr.png" /></a>
</li>
EDIT:
When pulled up in chrome inspector the link shows the style as display:none; however this is written nowhere in my code, when I put css in to make sure it displays, it still automatically changes to display:none;. And the img path is correct, not sure how to change it to an absolute path though..
Thanks for all the help! hope this extra info helps.
Works fine must be the path to the image http://jsfiddle.net/YuqVu/
Check the served images and their location with inspect element on Chrome. You can right-click --> inspect element --> click on resources
There is nothing wrong with you code at all unless you apply some style. The problem must be your image path.
Related
I would like to add a picture in my code that is not from my computer, but from the web. Let's say that the link of the image is "www.image.test", how would the code be written? And, what if I want to hide a link behind that image?
Simple. The code would look like this. The <a href> will add a link to the image when clicked on, and the <img> tag will add the image from the appropriate image URL that you would specify.
<img src="http://www.image.test">
This code works on all desktops and tablets, in every browser, but for some reason I cant find, it is not working on cellphones, android or apple!
I cannot even select the text on cellphones..
<div class="inner-content block-content-style-2">
<a href="index.php/fr/services-fr/moule">
<div class="icons-molding"> </div>
</a>
<h3 class="title">Conception</h3>
</div>
I tried moving the href to a couple of place, but didnt change anything, but anyways, even if it is not a link, i should be able to select the text when using a cellphone
I tried to add a href inside the h3 tag for mobile to click on it, but it is not working either.
you can try it live here: http://www.qualiplast.com
On desktop or tablet, it works just as intended, but not on any cellphone.
Thanks for helping me out.
There is a div with an id of 'avatar-body-middle-block' that is appearing above the links on mobile, and preventing them from being clickable. Remove (or more likely hide) this div on mobile and the links will work.
I faced the same problem. Here's how I solved it in my case.
I tried inspecting on the 'a href' element. Turns out that some other element shows up in the developer console. After some pondering, I realized that some other div element was showing up above my link.
After reading through the css styling for the overlapping element and disabling the overlapping css command, the link started working for me. (float: none had to be deleted in my case, from an overlapping div)
Hope this helps someone else out there
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.
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 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!!