Is it possible to show /hide iframe when user clicks on a link? I've used it to show hide .jpg files but with an iframe it doesnt seem to work..
<h3><a onclick="wp_showhide.main(this, 'spoiler1')" href="javascript:void(0)">
["Show", "Hide", "invisible"]
</a></h3>
<div id="spoiler1">
<a href="http://www.newyorker.com/online/blogs/photobooth/NASAEarth- 01.jpg">
<img class="aligncenter size-full wp-image-56" alt="Image" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="1291" height="783" />
</a>
</div>
Please help
Related
Why isn't my image showing up with the url I'm using? The url is valid and I used the same method to insert other images and it worked. First code is the url that isn't showing up and the other one are the images that are showing up. I have also included the images of what appears on the webpage for the unresponsive image as well as the responsive one.
<div>
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
<div class="project-grid">
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
</div>
I don't understand what the issue I did the exact same thing for both but only the second group of images is showing up on my webpage.
You've got special character quote marks instead of regular ones surrounding the src attribute.
Change the ” character to ". Most likely it was converted in something like Word or Outlook.
Fixed HTML:
<img src="https://via.placeholder.com/150/0000FF/808080" alt="Profile Pic" />
You used "https://...." for the profile picture, but if your development server is on "http://...", then the profile picture won't show up due to cross-protocol restrictions.
Change
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
to
<img src=”http://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
I have put a banner at the top of my website and I have tried to add a hyperlink to the whole div as follows:
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;">
It doesn't work but you can see it here: http://www.heavenlygardens.org.uk/maps/6/index3_new.html
Any ideas?
To achieve expected result,use below option
1.Stack banner front using z-index:9999
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;z-index:9999">
This works for me:
<div onclick="location.href='http://www.google.com/';" style="cursor:pointer;">
<img src="//path-to-image.jpg" alt="description of image" />
</div>
However, unless you have a good reason for doing this in JavaScript, plain HTML would be a better option.
<a href="http://www.google.com">
<img src="//path-to-image" alt="description of image"/>
</a>
so im designing a website using html, php, all that fun stuff & im trying to make facebook, twitter, youtube & instagram links that will open a new tab and take you to the website. but at the moment the URL is going to localhost/horizonphotography/www.facebook.com instead of opening the new tab and THEN going to www.facebook.com.
heres my HTML
<div class="social">
<a href="www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
<a href="www.twitter.com" target="_blank">
<img border="0" alt="twitter" src="img/twitter.png" width="50" height="50">
</a>
<a href="www.youtube.com" target="_blank">
<img border="0" alt="youtube" src="img/youtube.png" width="50" height="50">
</a>
<a href="www.instagram.com" target="_blank">
<img border="0" alt="instagram" src="img/instagram.png" width="50" height="50">
</a>
</div>
and my css 'if' required.
.social {
position: fixed;
bottom: 0;
right: 7%;
width: 300px;
}
thanks in advance!
Try using a protocol like http:// or // to external links like this :
<a href="http://www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
You need to specify the protocol, or put // at the start of the href attribute. For example:
http://www.youtube.com
Or
//www.youtube.com
Awesome, needed to identify the protocol as suggested. working well now! thanks everyone!
php
<a href='.$row5['url'].'"><img src="../asset/view-as-pdf.jpg"
width="94" height="94" /></a>
html
<center>
<a href="http://tools.com/com/fli7ppdf/K171/157/Kap157_E/files/kap157_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
after click image, it not open url, but view image. how to fix it
<center><a
href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf""><a
target="_blank" href="asset/view-as-pdf.jpg"><img
src="asset/view-as-pdf.jpg" height="94" width="94"></a></a></center>
Here you are closing a twice.
Your code should like this ,
<center><img src="asset/view-as-pdf.jpg" height="94" width="94"></center>
HTML
<center>
<a href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
Remove anchor tag which has link of the image.
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.