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+
Related
I am learning Blazor and at the moment I am trying to set an image as the background. I thought I would try display it first as the background-image css didnt work. I have attached a picture of my index.razor page and the img tag i am using is as follows:
<img src="file:///C:/Development/CsharpApplications/Portal/AlbertBartlettPortal/AlbertBartlettPortal/Pages/hero-range-1.jpg" alt="Background Image" />
It allows me to ctrl+click the file path and opens the image right away so it can see the image, but it wont display at all when the website is ran.
HELP!
Page Image Here
I put it in wwwroot\images and then used src="images/aaa.jg". No leading / OR ~/
I have a lightbox setup on my site and well I've got an unordered list and the images are displayed in a list item. I've got an href linking to the full size image then my lightbox code and then an img src with a thumbnail image. Why is my lightbox displaying 2 images and not the one.
I think it's displaying my thumbnail and the full size image but I'm not sure. When I click the image, it says 1-2. If you press the next button it shows the same image.
A peek at the code below. I expect it to be fairly simple but I'm learning..
<ul>
<li>
<a href="images/respectyourelders-full.png"
data-lightbox="recentwork"
data-title="This design was made for an apparel company called VolkWear Clothing.">
<img src="images/car1.png" alt="Respect your Elders Illustration" title="Respect your Elders Illustration" />
</a>
I am sure it is because you used data-lightbox="recentwork" for more than one hyperlink. Be sure to check it carefully.
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>
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 my image placed in a folder called images in the netbeans web pages folder and the link to it in my jsp is in a div as shown below:
<div id="image">
<p>
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width=600px
height=300px
/>
</p>
</div><!--end of image div-->
The problem is the image just doesn't load in the browser. What could be the problem? I used the same code in linux and it used to load the image. Could it be a browser problem, I'm using firefox 3.6 which I don't think should have a problem. Please let me know if any one has a clue as to why this is happening. If the problem is my code let me know how to adjust. Thank you
There are no units used in HTML width and height attributes.
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width="600"
height="300"
/>
Without seeing the rendered source of the page, I'd guess that's your problem. If not, try inspecting your image in Firebug and post what its rendered source looks like.
Also, make sure case sensitivity is not in play: gif vs. GIF.