How to make photos "appear clickable" ?

Question

User-597074468 posted

Hi Everyone,

(I apologize for my terrible terminology)

Do you know when you "wave" your cursor over a photo or a url link and it appears as I would like to put it "clickable" or the cursor changes into a "hand". My issue is this, on my site I have a photo that I've changed the source code to and the photo is actually "clickable" but if you "wave" your cursor over the photo it dosen't appear "clickable" Does anyone know how I would fix that ? The source code is below.

 

<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/Ringtone-Carrier-Photos/alltel-Complimentary Ringtones.jpg"

onClick="makeUrl('http://fbgdc.com/click/?s=8785&c=53726&subid=yahoo=flycell=alltel')"

Target="_blank">Alltell 15 Complimentary Ringtones</asp:HyperLink></td>

http://tinyurl.com/2tca8w (This is the page, just "wave" your cursor over the "alltell photo" and you will know what I'm talking about.)

Thanks everyone for there help.

Answer 1

User750226543 posted

you need to use a css style, style="cursor:hand"

Answer 2

User-945754744 posted

That's because you're using the OnClick event with JavaScript behind it instead of the href property in your HyperLink.

Is there a specific reason why you're using JavaScript to create the actal link?

Answer 3

User535736832 posted

try this

<asp:HyperLink ID="HyperLink1" runat="server" onmouseover="javascript:this.style.cursor='hand'" onmouseout="javascript:this.style.cursor='pointer'"  ImageUrl="~/Ringtone-Carrier-Photos/alltel-Complimentary Ringtones.jpg"
onClick="makeUrl('http://fbgdc.com/click/?s=8785&c=53726&subid=yahoo=flycell=alltel')"
Target="_blank">Alltell 15 Complimentary Ringtones</asp:HyperLink>

Answer 4

User1319223206 posted

 

        <asp:HyperLink ID="HyperLink1" runat="server" onClick="makeUrl('http://fbgdc.com/click/?s=8785&c=53726&subid=yahoo=flycell=alltel')" Target="_blank">
            <asp:Image ID="Image1" style="cursor:pointer" ImageUrl="http://imagecache2.allposters.com/images/pic/CAN/901~Pic-Island-Posters.jpg" AlternateText="Alltell 15 Complimentary Ringtones" runat="server" />
        </asp:HyperLink>

  

Answer 5

User-375742106 posted

quick question: why does visual studio says attribute not valid ?

Thanks

Answer 6

User-125547262 posted

 Because  the asp.net hyperlink has no such attribute. If you need to add an attribute use this in the code behind page

link.Attributes.Add("onmouseover"," javascript:......")

link is the assumed id 

Answer 7

User-1206174071 posted

<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/img/justAdded_thumb_sample.jpg"

NavigateUrl="~/Default2.aspx">HyperLink</asp:HyperLink>

 

To Make a Click Able You Have to give the Navigate Url .....

Answer 8

User-218475754 posted

 

www.codeproject.com

Answer 9

User-597074468 posted

Hi,

Thanks for the replys everyone. I've tried all of the belo code and nothing seems to be working.

"That's because you're using the OnClick event with JavaScript behind it instead of the href property in your HyperLink.

Is there a specific reason why you're using JavaScript to create the actal link?"

I need to use the Javascript because I need to track my affiliate sales and which keywords convert and which ones don't convert.

Please advise.

Thanks

Answer 10

User-125547262 posted

<asp:HyperLink ImageUrl="alltel-ComplimentaryRingtones.jpg" runat="server" ID="hlink" NavigateUrl="javascript:makeUrl('http://fbgdc.com/click/?s=8785&c=53726&subid=yahoo=flycell=alltel');" />

See  if the above works  for you. I have confirmed that the cursor appears. I do not have the implementation for your makeUrl.. Check it out and let me know how it goes

Answer 11

User-375742106 posted

Thanks

Answer 12

User-125547262 posted

Did it work as you intended?

Answer 13

User-221752185 posted

In addition to changing the cursor to "hand", changing the colors of the borders makes it appear clickable as well.

for instance,

<asp:Image ID="iMyImage" runat="server" ... ></asp:Image>

 

// Add javascript to change the styles or you can do this
// in your code behind.

var arrImages = document.getElementsByTagName("img");
for(var i = 0; i < arrImages.length; i++)
{
   arrImages[i].style.cursor = 'hand';
   arrImages[i].onmouseover = function() {
      this.style.background = '#333333';
   }
   arrImages[i].onmouseout = function() {
      this.style.background = '#ffffff';
   }
}

 
 

Answer 14

User-1243272925 posted

 Hi Triggered,

                    Can you provide full code for  this java script in code  behind.   thanks in advance.

 

Answer 15

User-469315704 posted

@ triggered

wont that change the attribute of every image in the page including banners logos and other images which are not links at all???
 

Answer 16

User-221752185 posted

 You can append the attributes to the Image objects via code behind by:

  

Image1.Attributes.Add("onmouseover","this.style.background = '#000'");
Image1.Attributes.Add("onmouseout","this.style.background = '#eee'");
Image1.Attributes.Add("style","cursor:hand;");

if you have a lot of images and they are being dynamically created, you can create
a "Wrapper Object" by placing a <asp:Panel around="" area="" are="" going="" to="" place="" pictures.="" then="" you="" can="" iterate="" through="" child="" and="" check="" type="" of="" the="" controls="">if they are equal to typeof(Image), then add the controls like above.

</asp:Panel>

 
 

Answer 17

User-221752185 posted

of course that javascript code would have made every image look clickable. It would take some minor adjustments on your end to make it fit to your page.

For instance, if the images are all within a div tag like so...

 <div id="wrapperImages"> (my images) </div>

then you would do...

document.getElementById("wrapperImags").getElementsByTagName("img") instead of document.getElementsByTagName("img")
 

Answer 18

User-597074468 posted

Hi Jeev and everyone.

Thanks for replying. The above code is working but I need to pass the keyphrase / keyword into the affiliate url address so I know which keywords convert and which keywords don't convert. Will the above code all me to figure that out ?

http://tinyurl.com/2tca8w

Thanks again everyone.

 

 

 

Answer 19

User-125547262 posted

SCM.. which code are you using .Is it the code snippet I posted?

Not exactly sure how you pick and choose the keywords to pass.If its a part of the URL, the change the navigateurl of the hyperlink and add the extra querystring values.

Answer 20

User-597074468 posted

Hi Jeev,

Thanks for the reply.

I'm using this code

<asp:HyperLink ImageUrl="alltel-ComplimentaryRingtones.jpg" runat="server" ID="hlink" NavigateUrl="javascript:makeUrl('http://fbgdc.com/click/?s=8785&c=53726&subid=yahoo=flycell=alltel');" />

(I'm promoting my site via ppc marketing)

but the most important factor of my url link is to pass along the keywords that convert and make sales for me and I need to track that information through my link, perhaps with a subid_parameter value ?  Would anyone know how to apend that  to my url ? What querystring values would I need ?

Thanks

Answer 21

User-125547262 posted

Hi Scm,

well not sure of exactly how the logic for PPC would work but changing the navigateurl should be a piece of cake

To add a new query string that is a static value add it to the url you already have inside the makeurl method.

If its a dynamic value, then instead of assigning the Navigateurl in the aspx page, you can do the same in your code behind page..

Hope it helps

Answer 22

User-597074468 posted

Hi Jeev,

Thanks for the response. Your code is working fine now. I thank you for that, for helping me. Jeev, would you or anyone know how to "write" what a person says on the page ? Meaning if I get ppc traffic for one of my sites and that person types in "American Dating Sites" is there anyway for me to have "Amercian Dating Sites" at the top of the page ? without having me make that page dynamically ?

Thanks