I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>
Related
I was doing a page with a list of sites I need to visit daily, such as exercise to learn Html, CSS. I would like to know if it is possible to create a link with a page icon that is in the upper tab of the browser (chrome).
Ex: I want to list StackOverflow on my site. So I create a link and for the icon, I want to use the image that is on the tab of the page itself, as in this:
You can use:
https://plus.google.com/_/favicon?domain=www.yourlink.com
example
<a href="">
<img src="https://plus.google.com/_/favicon?domain=www.stackoverflow.com"> Stackoverflow
</a>
If I'm correctly getting what you want, you'd need to either have a local copy or link to the sites' favicon, like so:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" />
My website: cultpops.com
I'm trying to get the top left logo on my site to link to the 'about' portion on my page. As per another stackoverflow topic, I placed [a href="#about"][/a] around said logo and [a id="about"][/a] around said portion. What am I missing here?
I see you really put [a id=”about”] in your code. This is not an html tag. html tags always are like this <htmltag> and not with square brackets
If you want to link to an anchor you just need to give an id to the html element you want (doesn't have to be an <a> tag).
The easiest way to do this is for example on the image above your about section.
Set your editor to text instead of visual and add an id to your image or the a tag around it. It will look like this.
<a href="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" id="about">
<img class="alignnone size-full wp-image-97" src="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" alt="logo2" width="97" height="133">
</a>
Place the following around the "img src="example.com/image.png" tag:
<a href="http://example.com/youraboutpage">
<img src="example.com/image.png">
</a>
I can see you are using wordpress -the logo image tag is in your header.php file available in Appearance>Editor
Hope this helps
Admin Alex
In the _Layout.cshtml, I have a heading image and two link images that change into other images when the cursor hovers over them. When the page is loaded initially (e.g. //localhost:58055/), the images are shown. When I redirect through the links so that the URL is //localhost:58055/Home/Index, for instance, the images only show the little "broken image" icon. Why might this be? Here is where I specify the header's image in _Layout.cshtml.
<header>
<div class="trippy-title">
<img src="images/title_wider.jpg" width="100%" height="100%" repeat>
</div>
</header>
I recommend you read this article for a better understanding of locations in ASP.net.
http://www.west-wind.com/weblog/posts/2009/Dec/21/Making-Sense-of-ASPNET-Paths
as a simple solution you can use ~/images/title_wider.jpg this works with Razor 2+
This is classic iframe code. All I want is to show different things when you click different links.
I want to display different galleries in wordpress on a page with different links. I don't wanna code different html's for each of them
<iframe id="myIframe" src="about:blank" height="200" width="500"></iframe>
<br />
Blogger<br />
CNN<br />
Google<br />
What you're trying to do is show and hide specific parts of the page when clicking on a link. You don't need to use iframes for that. I think you'd better use hidden div's for this, or maybe even an ajax call to load the different galleries. I'll show you the hidden divs approach :
<div id="gallery1" class="gallery">
A whole lot of html that makes up the 1st gallery
</div>
<div id="gallery2" class="gallery" style="display:none">
A whole lot of html that makes up the 2nd gallery
</div>
<div id="gallery3" class="gallery" style="display:none">
A whole lot of html that makes up the 3nd gallery
</div>
Show gallery 1
Show gallery 2
Show gallery 3
$('a').click(function() {
$('.gallery').hide();
$('#' + $(this).data('gallery')).show();
});
Here's a js fiddle: http://jsfiddle.net/nV5vy/
I have this htmls on a page which renders a photo album.
As you can see that there are 3 <img> tags.
The first two is under <li> which has display:none. But the last image is visible as it has style=''.
My question is: during page load will the first 2 images be loaded with the last image even if their container has display:none?
<div class="gallery">
<ul id="PhotoContainer">
<li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
<img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
<li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
<img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>
<li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
<img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
</ul>
</div>
If by "loaded" you mean downloaded, then yes. Resources with display: none styling are still fetched, just not rendered. In fact, this is a valid image pre-loading technique, as discussed in this article.
To verify, you can load your page and look at the downloaded resources tab in Chrome Developer Tools or Firebug.
It depends on which browser is loading the web page, I know google chrome loads all images, I expect most other browser are doing the same...
All images will get loaded into the cache, and technically the webpage. However, the css hides the 2 images before they come in contact with the human eye.