eliminating hyperlink, keeping image [Archive]

View Full Version : eliminating hyperlink, keeping image

gib65

05-23-2010, 08:23 PM

Hello,

I'm trying to do something with my art website that's turning out to be tricky. There's an easy way to explain this and there's a complicated way. Let's start with the easy way.

I'm trying to create a hyperlink around an image that turns on or off depending on what image is displayed. The image itself is dynamic; it sits in the middle of the page and changes depending on which thumb the user clicks (which themselves sit on the left of the page). There's one image in particular that I want to make into a hyperlink (but the rest are just images). The only tool I know of that comes close to implementing this is the display attribute that belongs to the hyperlink tag. When the user clicks on the thumb of the particular image to be made into a hyperlink, I would set (using javascript) the display attribute to 'inline' and when the user clicks on any other thumb I would set the display attribute to 'none'.

This doesn't quite work for my purposes, however, because setting the hyperlink display attribute to 'none' makes the whole image dissappear, not just its being a hyperlink. This is what I need help with. I need to work with something other than the display attribute (or some other approach all together), something that makes the image into a hyperlink and then back again without making the image itself dissappear. I'm at a loss though. Any help would be much appreciated.

Now for the complicated version. It's only complicated because of the sheer amount of code involved; so if you can understand the above, you can skip this part. If you need to see the code, read on at your own peril :). (btw, the URL is http://www.shahspace.com/art2).

The code begins in index.html. The relevant sections are in bold:

<script type="text/javascript" src="motiongallery2.js">

/***********************************************
* CMotion Image Gallery II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/

/* source: http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm */

</script>

<script language="javascript" type="text/javascript" src="functions.js"></script>



</head>

<body style="background-color: black;">



...



...

<tr><td><a href="#nogo" onclick="changePic(BULLS_EYE);return false;"><img src="thumbs/bulls_eye.jpg" border=1></a><br>Bull's Eye</td></tr>

<tr><td><a href="#nogo" onclick="changePic(FRACTURES);return false;"><img src="thumbs/fractures.jpg" border=1></a><br>Fractures</td></tr>

<tr><td><a href="#nogo" onclick="changePic(RUNNING_FROM_THE_LIGHT);return false;"><img src="thumbs/running_from_the_light.jpg" border=1></a><br>Running From the Light</td></tr>

...

<center>
<a id="fractureslink" href="#nogo" onmouseover="mainpic.src='mainpics/fractures_odd.jpg'" onmouseout="mainpic.src='mainpics/fractures_even.jpg'" usemap="#fracturesmap" border=0>-->
<img id="mainpic" style="border: 3px double darkred;" alt="mainpic" border=1>
</a>
</center>

Here's the relevant javascript function from function.js:

function changePic(num) {

mainpic.src="mainpics/"+files[num];
title.innerHTML = titles[num];
date.innerHTML = dates[num];
comment_body.innerHTML = comments[num];

cur_pic=num;

if (cur_pic == last_pic) {
nextlink.style.display = "none";
}
else {
nextlink.style.display = "inline";
}

if (cur_pic == first_pic) {
prevlink.style.display = "none";
}
else {
prevlink.style.display = "inline";
}

if (cur_pic == FRACTURES) {
fractureslink.style.display = "inline";
}
else {
fractureslink.style.display = "none";
}
}

The hyperlink is complicated more by a area map but I doubt this is relevant to the question I'm asking, but if you want to see it, I'd be happy to post it.

Anyway, I hope someone can help me with this problem. Thanks in advance.

jscheuer1

05-24-2010, 04:28 AM

What you want to do is to remove the href attribute of the link. Then it becomes a normal <a> anchor tag, no longer an anchor link.

It sounds like you have the routine as to when you want to do what worked out and can plug this technique in as required. Say the link when active is to:

http://www.somedomain.com/

So, your link would look something like so:

<a id="changer" href="http://www.somedomain.com/"><img src="some.jpg" alt=""></a>

Or, if it starts out not linked:

<a id="changer"><img src="some.jpg" alt=""></a>

To remove the link use this javascript:

document.getElementById('changer').removeAttribute('href', 0);

To add it:

document.getElementById('changer').setAttribute('href', 'http://www.somedomain.com/', 0);

Fortunately, this is one of those situations where if there is no attribute and you remove it again, there will be no error. And if you set the attribute and it is already set, no error for that either.

I think you can take this and adapt it to your requirements. You don't need to use document.getElementById('tag_id'), any valid javascript reference to the tag will do, but if you use the document's links collection (document.links), that won't work because, once the href is removed, the tag will no longer be in that collection. Using document.getElementById('tag_id') is the safest method. That id may only be used for that one tag, it must be unique on the page.

This same method will work with an area tag.

gib65

05-24-2010, 04:19 PM

Thanks for that, jscheuer1, it worked for the question I asked, but like I said, my purposes are a little more complex, and I'm trying your method using the set and remove attribute functions but it doesn't seem to work with onmouseover and onmouseout.

Here's what my code looks like so far:

INDEX.HTML:

<a id="fractureslink" border=0>
<img id="mainpic" style="border: 3px double darkred;" alt="mainpic" border=1>
</a>

FUNCTIONS.JS:

if (cur_pic == FRACTURES) {
document.getElementById('fractureslink').setAttribute('href', '#nogo', 0);
document.getElementById('fractureslink').setAttribute('onmouseover', 'mainpic.src="mainpics/fractures_odd.jpg"', 0);
document.getElementById('fractureslink').setAttribute('onmouseout', 'mainpic.src="mainpics/fractures_even.jpg"', 0);
}
else {
document.getElementById('fractureslink').removeAttribute('href', 0);
document.getElementById('fractureslink').removeAttribute('onmouseover', 0);
document.getElementById('fractureslink').removeAttribute('onmouseout', 0);
}

Note that the setting and removing of the href attribute works just fine (thanks for that); it's the onmouseover and onmouseout that seem to have no effect.

I've tried variants of the above code to no avail. For example, instead of using document.getElement... I tried just referencing the hyperlink directly by saying fractureslink.onmouseover="mainpic.src=..., but this didn't work.

Any further suggestions?

jscheuer1

05-24-2010, 04:56 PM

Events are different. Though technically attributes, they must be dealt with in a different way, ex - instead of:

.setAttribute('onmouseover', 'mainpic.src="mainpics/fractures_odd.jpg"', 0);

We do:

.onmouseover = function(){mainpic.src="mainpics/fractures_odd.jpg";};

And instead of:

.removeAttribute('onmouseover', 0);

.onmouseover = function(){return;};

The same holds true for onmouseout, onclick, etc.

There are other ways of dealing with events, but (other than just hard coding them, which is not an option here) this is the most straightforward and easy to grasp.

gib65

05-24-2010, 07:13 PM

Thanks John, once again your suggestions worked perfectly. There is one last complication I'd like to ask for help on if I may (I promise this will be the last one :)) - area maps.

I have an area map in a file called fracturesmap.inc that looks like this:

<map name="fracturesmap">

<area shape="poly" coords="1,1, 40,1, 1,123" href="javascript:ViewFracturesOriginal('odd')">

<area shape="poly" coords="40,1, 105,1, 1,325, 1,123" href="javascript:ViewFracturesOriginal('even')">

<area shape="poly" coords="105,1, 127,1, 1,399, 1,325" href="javascript:ViewFracturesOriginal('odd')">

<area shape="poly" coords="127,1, 145,1, 14,410, 1,410, 1,399" href="javascript:ViewFracturesOriginal('even')">

<area shape="poly" coords="145,1, 177,1, 47,410, 14,410" href="javascript:ViewFracturesOriginal('odd')">

<area shape="poly" coords="177,1, 232,1, 104,410, 47,410" href="javascript:ViewFracturesOriginal('even')">

<area shape="poly" coords="232,1, 305,1, 176,410, 104,410" href="javascript:ViewFracturesOriginal('odd')">

<area shape="poly" coords="305,1, 385,1, 249,410, 176,410" href="javascript:ViewFracturesOriginal('even')">

<area shape="poly" coords="385,1, 401,1, 262,410, 249,410" href="javascript:ViewFracturesOriginal('odd')">

<area shape="poly" coords="401,1, 465,1, 327,410, 262,410" href="javascript:ViewFracturesOriginal('even')">

<area shape="poly" coords="465,1, 511,1, 376,410, 327,410" href="javascript:ViewFracturesOriginal('odd')">

<area shape="poly" coords="511,1, 530,1, 530,218, 460,410, 376,410" href="javascript:ViewFracturesOriginal('even')">

<area shape="poly" coords="530,218, 530,410, 460,410" href="javascript:ViewFracturesOriginal('odd')">
</map>

Basically, it partitions the image up into the diagonal strips that you see if you go to my website (http://www.shahspace.com/art2 - it's the 36th one down the image gallery - called "Fractures"). As you can see, it's really two drawings put together. What I would like the area map to do is to bring in the original drawing (non-fractured) when the user click on any one of its corresponding partitions. So if he clicks on a strip with the lizard dude, the whole image of the lizard dude shows up. If he clicks on a strip with the guy holding the knife, the whole image of the guy holding the knife shows up.

I bring in the area map with a #include directive (it's in the body of the page, not the head - is that appropriate?)

The ViewFracturesOriginal function is pretty straight forward:

functions.js:

...

function viewFracturesOriginal(parity) {
if (parity == "even") {
mainpic.src="mainpics/fractures_original_even.jpg";
}
else {
mainpic.src="mainpics/fractures_original_odd.jpg";
}
}

...

but I don't think that's where the problem lies. My best guess is that, once again, I need a different way of adding the usemap attribute to the hyperlink tag than the ones you've suggested so far. So far, I've tried:

...
document.getElementById('fractureslink').setAttribute('usemap', '#fracturesmap', 0);
...
document.getElementById('fractureslink').removeAttribute('usemap', 0);
...

and:

...
document.getElementById('fractureslink').usemap = function(){fractureslink.usemap = "#fracturesmap";};
...
document.getElementById('fractureslink').usemap = function(){return;};
...

and:

...
fractureslink.usemap = "#fracturesmap";
...
fractureslink.usemap = "";
...

and I even figured there's no harm is dropping all together the setting and removing of the usemap attribute in my javascript function and just including it in the hyperlink itself in index.html:

<a id="fractureslink" usemap="#fracturesmap" border=0>
<img id="mainpic" style="border: 3px double darkred;" alt="mainpic" border=1>
</a>

because if in all other images, the hyperlink is going to be disabled, the user can't very well click on the image and effect the area map anyway... but this didn't work either.

As promised, this will be my last request for help. Thanks very much.

jscheuer1

05-25-2010, 07:13 AM

There could be other problems. But this (from your source code):

<a id="fractureslink" usemap="#fracturesmap" border=0>

is non-standard and probably won't work. Even if it does in some browsers, accessing it via javascript will probably fail, even in those browsers. The usemap attribute (as far as I know) may only be applied to <object> (risky), or <img> tags. Regardless of the tag, the usemap attribute should be used with an image (object tags may be used to display images, but as I say, that's risky). The border attribute doesn't apply to <a> tags. An image tag with a style border needs no border attribute. IE uses the alt attribute of an image as a title attribute unless an empty title attribute is specified. So:

<a id="fractureslink">
<img usemap="#fracturesmap" id="mainpic" style="border: 3px double darkred;" alt="mainpic" title="">
</a>

You shouldn't use a link with the image that's used for an image map. But here we are not. We can remove the usemap, and at the same time assign an href attribute to the a tag, making it a link. Later we can remove the href and at the same time set the usemap for the img tag. Those would both be fine.

You can change the usemap attribute of an img tag with setAttribute and removeAttribute:

document.getElementById('mainpic').removeAttribute('usemap', 0);

and:

document.getElementById('mainpic').setAttribute('usemap', '#fracturesmap', 0);

As a side note, there technically is no such thing in HTML as an "area map". It's called an image map.

gib65

05-25-2010, 03:31 PM

Thanks very much John, everything's working out great now!