Create a simple interactive image using jQuery/javascript

Posted October 30th, 2009 in jQuery and tagged Content Editor Web Part, Featured, javascript, jQuery, onmouseout, onmouseover, UI by Mike Stevens

In spite of my rudimentary javascript skills, I’ve been using jQuery for just about anything I can think of lately to spruce up the MOSS 2007/WSS user experience. Yesterday I threw together a simple interactive image element using the jQueryUI library. I wanted to display info dialog/modal windows when the user moved the mouse over a region on the image. Using some old school HTML and simple javascript I was able to throw some neat content up very quickly.

Click here for the demo

Again no ground-breaking stuff here for you javascript gurus, but I was pleased with the results for the minimal amount of effort I put into it. Here is what I did:

1) Created a barebones html page and with an <img> element and created an associated image map (aka “hot spot” for those of us willing to admit we ever used FrontPage…)

<html>
    <head>
        <title>jQueryUI Dialog Test</title>
    </head>
    <body>
        <img src="images/map.png" alt="" usemap="#atl_map" border="0">
        <map name="atl_map">

    <!– coords="left, top, right, bottom "–>
    <area     shape="rect" coords="150,40,180,70"
            href="#" alt=""
            onMouseOver="$(northwest).dialog(‘open’)"
            onMouseOut="$(northwest).dialog(‘close’)">
    <area     shape="rect" coords="440,200,470,234"
            href="#" alt=""
            onMouseOver="$(northeast).dialog(‘open’)"
            onMouseOut="$(northeast).dialog(‘close’)">
    <area     shape="rect" coords="50,295,80,325"
            href="#" alt=""
            onMouseOver="$(southwest).dialog(‘open’)"
            onMouseOut="$(southwest).dialog(‘close’)">
    <area     shape="rect" coords="225,390,255,420"
            href="#" alt=""
            onMouseOver="$(southeast).dialog(‘open’)"
            onMouseOut="$(southeast).dialog(‘close’)">
</map>

</body>
</html>

2) Loaded the jQuery and jQueryUI libraries from Google’s CDN by adding some lines to the <head> of my new page and linked to the jQueryUI theme .css file (not well documented, I might add!)

3) Added <div> elements for my dialog windows to the <body> tag in the html

<!– dialog windows –>
<div id="northwest" class="modal" title="NW Atlanta">Woodstock, Smyrna, etc.</div>
<div id="northeast" class="modal" title="NE Atlanta">Duluth, Lawrenceville, etc.</div>
<div id="southwest" class="modal" title="SW Atlanta">Douglasville, PTC, etc.</div>
<div id="southwest" class="modal" title="SE Atlanta">Stockbridge, McDonough, etc.</div>

4) Added some javascript using jQuery and jQueryUI libraries to call dialog windows and added the onmouseover and onmouseout elements to my <area> tags for the image map. Note the e.pageX and e.pageY coordinates in the script below. These are the current mouse coordinates on the initial mouseover event. I am using these values to place the dialog box content. I referred to to the jQueryUI dialog demo documentation for the available options for dialogs.

    coordinates[0] = e.pageX;
    coordinates[1] = e.pageY;
    return true;
});

$.ui.dialog.defaults.bgiframe = true;
$.ui.dialog.defaults.autoOpen = false;
$.ui.dialog.defaults.resizable = false;
$.ui.dialog.defaults.hide =’slide’;
$.ui.dialog.defaults.show = ‘slide’;
$.ui.dialog.defaults.position = coordinates;
$(function() {
$(northwest).dialog();
$(northeast).dialog();
$(southwest).dialog();
$(southeast).dialog();
});
</script>

…

5) Finally, I added some styles to the header to hide the dialog close button and play around with the look of the dialog box

Here is the full page (see below). To add something like this quick and dirty to a SharePoint page, you would just need to strip out the <html>, <head>, and <body> tags and cut and paste the HTML into the “Source” for a Content Editor web part (also below)

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQueryUI Dialog Test</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"
type="text/css" >

</head>
<body>
<!– jQueryUI dialog –>
<script type="text/javascript">
var coordinates = []
$().mousemove(function(e){

    coordinates[0] = e.pageX;
    coordinates[1] = e.pageY;
    return true;
});

$.ui.dialog.defaults.bgiframe = true;
$.ui.dialog.defaults.autoOpen = false;
$.ui.dialog.defaults.resizable = false;
//$.ui.dialog.defaults.hide =’slide’;
//$.ui.dialog.defaults.show = ‘slide’;
$.ui.dialog.defaults.position = coordinates;
$(function() {
$(northwest).dialog();
$(northeast).dialog();
$(southwest).dialog();
$(southeast).dialog();
});
</script>
<font face="calibri, arial, helvetica" color="navy"><strong>Move your mouse cursor over the pushpins for a dialog window</strong></font>
<br />
<!– dialog windows –>
<div id="northwest" class="modal" title="Northwest Atlanta">Woodstock, Smyrna,
                etc.</div>
<div id="northeast" class="modal" title="Northeast Atlanta">Duluth,
                Lawrenceville, etc.</div>
<div id="southwest" class="modal" title="Southwest Atlanta">Douglasville,
                Peachtree City, etc.</div>
<div id="southeast" class="modal" title="Southeast Atlanta">Stockbridge,
                McDonough, etc.</div>

</body>
</html>

Content Editor Web Part snippet:

<!– jQueryUI dialog –>
<script type="text/javascript">
var coordinates = []
$().mousemove(function(e){

    coordinates[0] = e.pageX;
    coordinates[1] = e.pageY;
    return true;
});

No related posts.

Create a simple interactive image using jQuery/javascript

Leave a Reply

Tags

Categories

Archives

Log In