[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

add link to button in rotating banner

Posted on 2013-12-31
13
Medium Priority
?
487 Views
Last Modified: 2014-01-14
Hi there.  I have a wordpress site here, http://64.247.184.147/ and it is the u-design theme.  It uses the Cycle 1 Slider.

I have the banners click through to the Locations page.  However, on those banners I also have a button called Pollen Count which I need to make clickable to an outbound url.  The code inside the Cycle 1 php page is:

<div class="c1-slideshow">
<ul id="c1-slider">
<?php				foreach( $c1_slides_array as $slide_row_number ) :
				    $c1_slide_link_url = $udesign_options['c1_slide_link_url_'.$slide_row_number];
				    $c1_slide_link_target = $udesign_options['c1_slide_link_target_'.$slide_row_number]; ?>
				    <li>
					<div class="c1-slide-img-wrapper">
<?php					    echo ($c1_slide_link_url) ? "<a href='{$c1_slide_link_url}' target='_{$c1_slide_link_target}'>" : '' ; ?>
						<img src="<?php echo $udesign_options['c1_slide_img_url_'.$slide_row_number]; ?>" alt="<?php echo $udesign_options['c1_slide_image_alt_tag_'.$slide_row_number]; ?>" class="slide-img" width="<?php echo $c1_image_width; ?>" height="<?php echo $c1_image_height; ?>" />
<?php					    echo ($c1_slide_link_url) ? "</a>" : '' ; ?>
					</div>
				    </li>
<?php				endforeach; ?>
			    </ul>
			    <input type="hidden" class="base-url" value="<?php echo site_url(); ?>" />
		    </div>

Open in new window


Any idea how I make that happen?  I guess I can remove the button from the graphics then make it float on top of each banner but have no idea how to accomplish that.  Any help would be greatly appreciated, thanks!
0
Comment
Question by:COwebmaster
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
13 Comments
 

Author Comment

by:COwebmaster
ID: 39749172
Hi Ray.  Sorry, I moved it here now: http://www.csallergy.com
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39749399
It's an image?  Make it an imagemap and make the button coordinates the hot spot.
0
 

Author Comment

by:COwebmaster
ID: 39749518
Do you have an example?
0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 111

Accepted Solution

by:
Ray Paseur earned 668 total points
ID: 39750040
This is not specific to WordPress, but it shows how to create a usemap.  You can try it on my server, here:
http://www.laprbass.com/RAY_imagemap.html

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>HTML5 Page With ImageMap</title>
</head>
<body>

<img src="RAY_EE_red_button.png" alt="UseMap Example" border="0" usemap="#myMap"/>
<map name="myMap">
  <area shape="rect"
        coords="200,140,400,260"
        alt="IMG USEMAP AREA COORDS"
        href="http://lmgtfy.com?q=Image+Map"
        target="_blank" />
</map>

<!-- HOW TO DO THE COORDINATES AS INSETS FROM THE TOP LEFT AT 0,0
shape="rect" coords="left,top,right,bottom"
shape="circ" coords="centerx,centery,radius"
shape="poly" coords="x1,y1,x2,y2,..,xn,yn"
-->

</body>
</html>

Open in new window

0
 

Author Comment

by:COwebmaster
ID: 39750266
Okay will that work on that type of site which is responsive?
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 1332 total points
ID: 39750267
Ray's got the right code above.  To integrate it into your specific case, you would need to deal with lines 8-10 in your original snippet.

<?php echo ($c1_slide_link_url) ? "<a href='{$c1_slide_link_url}' target='_{$c1_slide_link_target}'>" : '' ; ?>
<img src="<?php echo $udesign_options['c1_slide_img_url_'.$slide_row_number]; ?>" alt="<?php echo $udesign_options['c1_slide_image_alt_tag_'.$slide_row_number]; ?>" class="slide-img" width="<?php echo $c1_image_width; ?>" height="<?php echo $c1_image_height; ?>" />
<?php echo ($c1_slide_link_url) ? "</a>" : '' ; ?>

Open in new window


Lines 8 and 10 (1 and 3 above) deal with setting the <a> tag for the banner.  You would need to remove both lines because we don't want to wrap an imagemap with a link...the link would supersede the map tag and render it useless.

You would then replace line 9 with Ray's lines 10-23 but you will need to replace the various src and href attributes with the equivalent PHP code from your original snippet.  So src's would use:

<?php echo $udesign_options['c1_slide_img_url_'.$slide_row_number]; ?>

Open in new window


and href's would use:

<?php	echo ($c1_slide_link_url) ? "<a href='{$c1_slide_link_url}' target='_{$c1_slide_link_target}'>" : '' ; ?>

Open in new window


The hard part will be creating the hotspots.  It's fairly easy to define a specific button on an image map (use Ray's example there) but in this case you need to define a lot more than that since you want all other parts of the image clickable to some other page and just the button going somewhere else.

That map code (using banner1.png as my template) would look something like this:

<map name="Map" id="Map">
  <area shape="rect" coords="2,1,911,287" href="something.html" alt="top" />
  <area shape="rect" coords="3,287,704,402" href="something.html" alt="bottomleft" />
  <area shape="rect" coords="703,318,915,373" href="something.html" alt="belowbutton" />
  <area shape="rect" coords="864,286,910,328" href="something.html" alt="rightbutton" />
  <area shape="rect" coords="704,286,865,329" href="pollencounts.html" alt="thebutton" />
</map>

Open in new window


So try to integrate our two posts into a single solution and post back if you have trouble.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 1332 total points
ID: 39750273
Okay will that work on that type of site which is responsive?

Not using the code above. Imagemaps use hardcoded coordinates.  To make an imagemap responsive you have to scale the coordinates along with the image and that will involve javascript to get it done properly.

This is where my coding expertise peters out but there are tons of links available for the Googling:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

That one is the first result and contains an example, source code via View Source and a link to download the plugin.  So you would need to enqueue the plugin into WordPress and then set up the image map code per the example to get it to be responsive.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 39750300
Okay will that work on that type of site which is responsive?
Interesting question.  If you can detect the dimensions you want to achieve on the device via JavaScript, you may be able to transmit these dimensions to the server via an AJAX request.  On the server, you can generate the HTML for the <map> tag and send the custom HTML to the browser.  You would be able to replace the <map> and the <img> in the DOM.  If you start with the image hidden and then call .show() it will probably make for a smoother page load.

I have never tried to manipulate the <map> tag with jQuery.  I think you could resize the image with jQuery by adding styling for width and height.  I am fairly sure that the <map> tag needs numeric attributes for coords, and cannot use percentages (too bad).  So somewhere you would need to make the ratios for the express location of the links.

You might also be able to position the links "absolute" using CSS and a little javascript to compute the exact locations.
0
 

Author Comment

by:COwebmaster
ID: 39762859
Okay, I got that to work... http://www.csallergy.com/

Now, it's a matter of figuring out how to change those image map coordinates when those banners are displayed smaller such as on tablets. I'm looking at the site now in http://ipadpeek.com/ (vertical view on ipad).
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 39762917
FWIW, this is going to be easier to get right if you switch over to the HTML5 doctype.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.csallergy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 

Author Closing Comment

by:COwebmaster
ID: 39781321
Thanks!
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 39781404
Thanks for the points and thanks for using EE, ~Ray
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question