Im just really new at this, i dont even know how to use CSS, anyway, this is the html that i want to fix, I WANT THE BOXES that has links in them to be highlighted or something when mouse is on it.
<img class="aligncenter wp-image-351" src="http://gms-wga.org/wp-content/uploads/2014/08/WGA-Organogram.jpg" alt="WGA Organogram" usemap="#wga" width="1126" height="1122" />
<map name="wga"> <area title="" alt="" coords="135,131,479,228" shape="rect" href="/about-us/program-implementation-structure/wga-coordinators-and-focal-points/" target="" /> <area title="" alt="" coords="152,299,457,415" shape="rect" href="/about-us/program-implementation-structure/wga-coordinators-and-focal-points/" target="" /> <area title="" alt="" coords="642,132,949,227" shape="rect" href="/about-us/program-implementation-structure/wga-co-chairdirector/" target="" /> <area title="" alt="" coords="662,303,911,394" shape="rect" href="/about-us/program-implementation-structure/adb-officer/" target="" /> <area title="" alt="" coords="290,512,837,742" shape="rect" href="/about-us/program-implementation-structure/wga-secretariat/" target="" /> </map>
Sadly you can't do it with just html. If you want interactivity like that you will have to learn Jquery. Our just javascript in order to do that. A good place to learn it is www.codeacademy.com/
Why dont you use a background image and transparent <div> tags so that it will highlight when you hover? Only if you are okay with using them :)
Related
I'm using the following image code that will show an image only if it exists.
<img th:if="${!ad.adPhotos.empty}" th:src="|/imageDisplay?id=${ad.adPhotos[0].id}|" alt="" class="img-respocive" />
I want to show this for the else caluse
<img height="150" width="150" src="img/NoPicAvailable.png" />
How would this be done with Thymeleaf?
I would personally do it like this:
<img th:unless="${ad.adPhotos.empty}" th:src="|/imageDisplay?id=${ad.adPhotos[0].id}|" alt="" class="img-respocive" />
<img th:if="${ad.adPhotos.empty}"height="150" width="150" src="img/NoPicAvailable.png" />
As a sidenote, I think I would generate the src with thymeleaf url syntax, rather than string concatenation.
<img th:unless="${ad.adPhotos.empty}" th:src="#{/imageDisplay(id=${ad.adPhotos[0].id})}" alt="" class="img-respocive" />
I have a lightbox poptrox gallery installed on my website. Each thumbnail however opens the full image of that thumbnail and when you click next/previous it moves to a picture of the next thumbnail.
Is it possible to make each thumbnail contain a gallery of it's own and when you click on it the full screen image is part of the gallery. That way when you clock next/previous it scrolls through its unique collection of images.
I used this to set it up https://github.com/n33/jquery.poptrox.
Any help would be amazing!
According to the site you set up your gallery like
<div id="gallery">
<img src="path/to/image1_thumbnail.jpg" />
<img src="path/to/image2_thumbnail.jpg" />
<img src="path/to/image3_thumbnail.jpg" />
<img src="path/to/image4_thumbnail.jpg" />
<img src="path/to/image5_thumbnail.jpg" />
<img src="path/to/image6_thumbnail.jpg" />
</div>
and you have a jQuery call like
var foo = $('#gallery');
foo.poptrox();
so you just need to add another gallery like
<div id="gallery1">
<img src="path/to/image1_thumbnail.jpg" />
<img src="path/to/image2_thumbnail.jpg" />
<img src="path/to/image3_thumbnail.jpg" />
<img src="path/to/image4_thumbnail.jpg" />
<img src="path/to/image5_thumbnail.jpg" />
<img src="path/to/image6_thumbnail.jpg" />
</div>
<div id="gallery2">
<img src="path/to/image1_thumbnail.jpg" />
<img src="path/to/image2_thumbnail.jpg" />
<img src="path/to/image3_thumbnail.jpg" />
<img src="path/to/image4_thumbnail.jpg" />
<img src="path/to/image5_thumbnail.jpg" />
<img src="path/to/image6_thumbnail.jpg" />
</div>
and add another jQuery
var foo = $('#gallery1');
foo1.poptrox();
var foo2 = $('#gallery2');
foo1.poptrox();
I hope that this helps, also if you post you have tried I can see how to better help
I am using flexslider.
It is very easy to implement and customizing.
Now my every slide is a link.
is there any way to put to links for a single slide?
that needs to redirect to PAGE1 when click the left side of the image and must redirect to PAGE2 when click the right side.
Thanks in advance dear seniors...
I've found the answer.
The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
I've found the answer. The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
can any one suggest how to write target="_blank" in struts2. I tried something like below but the hyperlink was not working
<s:url id="imageDownload" namespace="/" action="downloadImage" var="urlTag">
<s:param name="ImageFileName" value="%{ImageFileName}"></s:param>
<s:param name="id" value="%{id}"></s:param>
</s:url>
<a class="linkView" href="<s:property value="#urlTag" />" target="_blank">
<s:property value="ImageFileName" />
</a>
thanks
I think
<a class="linkView" href="<s:property value="#urlTag" />" target="_blank">
<s:property value="ImageFileName" />
</a>
is correct.
in my site.master file, i have the following code:
<map name="indexMap">
<area shape="rect" coords="3,9,59,24" href= "Home">
<area shape="rect" coords="73,8,146,24" href="CourseBio">
<area shape="rect" coords="168,8,235,24" href="ProShop">
<area shape="rect" coords="257,7,336,24" href="ScoreCard">
<area shape="rect" coords="358,8,480,28" href="OutingsandEvents">
<area shape="rect" coords="502,7,573,27" href="Members">
<area shape="rect" coords="589,8,666,28" href="Directions">
<area shape="rect" coords="690,9,767,25" href="ContactUs">
</map>
Which works fine if i am at:
http://mysite.com/Home
but when i am at:
http://mysite.com/Home/Welcome
and i click on one of these links, it goes to:
http://mysite.com/Home/ProShop
instead of what i want, which is:
http://mysite.com/ProShop
how can i have links in the site.master that always go to controllers in the root location?
Use Url.Content helper:
<area href="<%= Url.Content("~/ProShop") %>" shape="rect" coords="168,8,235,24">
or Url.RouteUrl:
<area href="<%= Url.RouteUrl(new { controller = "ProShop" }) %>" shape="rect" coords="168,8,235,24">