I need to add a link to images in my slideshow(cycle2) which is also setup with a pager. How do I do that without knocking the image down of the slider??
<div
id="slideshow" class="cycle-slideshow"
data-cycle-manual-fx="scrollHorz"
data-cycle-pager-fx="fade"
data-cycle-manual-speed="400"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-speed="600"
data-cycle-timeout="3000"
data-cycle-pager = "#pager"
data-cycle-pager-template="<a href='#'><img src='{{src}}' width=150 height=100></a>">
<img src="bear scene.jpg" alt=""/>
<img src="someimage.jpg" alt=""/>
<img src="otherimage.jpg" alt=""/>
<img src="picute.jpg" alt=""/>
<img src="somethingelse.jpg" alt=""/>
<img src="anotherpic_.jpg" alt=""/>
<img src="lastpic.jpg" alt=""/>
</div>
If you do not want to mess up with the css (which you need to do if you wrap the images in <a> tags) you can just use javascript onclick event for the images to open a link from the images like this:
<img onclick="window.open('http://www.google.com', '_blank')" src="bear scene.jpg" alt=""/>
Here are some examples: https://jsfiddle.net/2jjomuge/
Related
I'm coding html and putting in images but they wont load.
How can I fix this?
<img src="file:///D:/Minecraft.png">
<img src="file:///D:/Minecraft.png">
<img src="file:///D:/MinecraftDungeons.png">
<img src="file:///D:/MyFirendPedro.png">
<br>
<img src="file:///D:/Roblox.png">
<img src="file:///D:/Roblox_Vesteria.png">
<img src="file:///D:/Retro.jpg">
<br>
change your src path to src="D:/Minecraft.png"
This is a follow-up question from this post:
HTML / CSS How do I force images to horizontally display
The code below will display 6 figures. Each figure contains a single image with a caption. The figures are laid out 3 horizontally in 2 vertical groups. Now I want to add an additional image to each of my figures directly below (vertical) the first image. Rest of the layout should remain the same. How do I do that? (I added the extra example image in each figure, but it displays horizontally instead of vertically.)
.group {
white-space: nowrap;
}
.group div {
display: inline-block;
}
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
Simply put a <br> between the two images, i.e.
<img src="example.jpg"/><br>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
<div class="product-thumbnails" data-show="5">
<div href="http://cdn.palmgren.com/images/products/9661051.jpg"
class="item-image" title="">
<img width="100" height="128"
src="http://cdn.palmgren.com/images/thumbnails/9661051.jpg" alt=""/>
</div>
<div href="http://cdn.palmgren.com/images/products/9661101_death_stop.jpg"
class="item-image" title="">
<img width="100" height="128" src="" alt=""/>
</div>
</div>
I have written the code below to extract src i.e. http://cdn.palmgren.com/images/thumbnails/9661051.jpg but it is not working. Please help me to correct the code.
TAG XPATH="//div[#class="product-thumbnails"]/div[1]/img" EXTRACT=src
This XPath (adding a /#src to your original)
//div[#class="product-thumbnails"]/div[1]/img/#src
will select
http://cdn.palmgren.com/images/thumbnails/9661051.jpg
as requested.
I have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
I have a simple div with three images in it and Im trying to make all three images separate html links
Am I missing something? This seems too easy, but it surely doesn't work:
<div><img src="img/dboarddown.png"><img src="img/ranking.png"><img src="img/analytics.png"></div>
span doesnt work either....I dont get the pointer and nothing is click-able.
this should work just fine
<div>
<a href="#link1">
<img src="img/dboarddown.png"/>
</a>
<a href="#link2">
<img src="img/ranking.png"/>
</a>
<a href="#link3">
<img src="img/analytics.png"/>
</a>
</div>
you only got one link:
<div>
<img src="img/dboarddown.png">
<img src="img/ranking.png">
<img src="img/analytics.png">
</div>
replace to:
<div>
<img src="img/dboarddown.png" alt="" />
<img src="img/ranking.png" alt="" />
<img src="img/analytics.png" alt="" />
</div>
<div><img src="img/dboarddown.png"/>
<img src="img/ranking.png"/>
<img src="img/analytics.png"/></div>
Last two images are not wrapped in to tag and don't forget to close img tag.