hyperlink removed by moderator

basically the buttons dont work like they should, I've made the buttons using photoshop and importing them to dreamweaver, from there creating the button as a hyperlink. In theory the button should therfore on mouseover display the behaviour as an active link.

Upon closing the yahoo advert and moving your mouse well to the right of the button the hyperlink works... why doesnt it work like it should?

Cheers

John

Recommended Answers

All 18 Replies

hyperlink removed by moderator

basically the buttons dont work like they should, I've made the buttons using photoshop and importing them to dreamweaver, from there creating the button as a hyperlink. In theory the button should therfore on mouseover display the behaviour as an active link.

I don't understand what you mean. The links work fine. I don't understand what theory states that your image should display "the behavior" on mouseover, whatever you mean by that. Perhaps you could be more specific as to what you're expecting.

well in theory if you hover the mouse anywhere over the jpg image shouldnt the cursor change? To show that its an hyperlink? It only seems to want to do that if you move the mouse to the very right of it

I haven't researched your specific issue, but it isn't necessary to use images as buttons or hyperlinks, unless you want buttons like you see on daniweb, with an image background.

Using CSS, you can style regular hyperlinks to look and function as buttons.

<html>
<head>
<style type="text/css">
a:link, a:visited
{
  float: left;
  margin: 2px 5px 2px 5px;
  padding: 2px;
  width: 100px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid black;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  background: #cccccc;
  text-align: center;
  text-decoration: none;
  font: normal 10px Verdana;
  color: black;
}

a:hover
{
  background: #eeeeee;
}

a:active
{
  border-bottom: 1px solid #eeeeee;
  border-top: 1px solid black;
  border-right: 1px solid #eeeeee;
  border-left: 1px solid black;
}
</style>
</head>
<body>
<a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
</body>
</html>

well in theory if you hover the mouse anywhere over the jpg image shouldnt the cursor change? To show that its an hyperlink? It only seems to want to do that if you move the mouse to the very right of it

The cursor changes for me. I get a hand. Crap like this is what you get when you try to make a web site without knowing HTML and CSS.

Don't know about you mate, but

Crap like this is what you get when you try to make a web site without knowing HTML and CSS.

doesn't seem to me to be helpful at all.

I've come here via a 'bad post' report, and am no coder by any twisted stretch of the imagination, but I'm all too aware that there are applications both software and web based which enable people to create websites without ever needing to learn a single part of coding. A simple google search tells me that Dreamweaver is one such application.

I'd expect that when an inexperienced person asks a technical question they should be met with politeness and assistance if such is a possibility.

I was not being impolite; that statement is simply true and observant of the fact that you'll get different results in different browsers if you don't have a general idea about HTML and CSS.

And you're right, it does not help the other poster solve his immediate problem. So what? How much help do you expect now that the URL's deleted?

I moderate this forum; I deleted the URL. It's daniweb policy, for good reasons. I sent a private message to the original poster, explaining how to post HTML and CSS code within a message. You'll also note how I provided an alternative to using images, which is to apply CSS to standard hyperlinks.

Telling someone that their efforts are "crap" and that they don't know HTML and CSS isn't really in the spirit of things. However, I'm willing to grant you the benefit of a doubt and suppose that was just poor wording and not a personal attack. So, we'll all watch this thread and see if he comes back with more questions, and do our best to assist. Agreed?

Any chance that this is simply a browser issue, by the way?

A move to Mozilla as a preferred browser a while back 'broke' my work console log in, to the extent that for a while I had to 'click' alongside the buttons rather than on them. My worksite was coded for Internet Explorer and other browsers were not coping with it very well at all.

Ah, "crap" was referring to the weird behaviors that generally happen when you trust a wysiwyg editor's code to work on multiple browsers, not anybody's particular code.

You could replace it with "problems" and it would mean the same thing.

Hello,

thanks for the support so far tgreer I'll give your coding a shot and go from there. As for the link I've included it in my sig. Thanks for the information guys :-)

I've checked that site in both Firefox and IE, on several machines, and it works as it should for me ;)

I suspect the problem may lie with the PC you are using.

I experienced the problem in IE on my home machine. But if I copy the code to a local file and delete the Geocities code, the problem goes away in the local copy.

I experienced the problem in IE on my home machine. But if I copy the code to a local file and delete the Geocities code, the problem goes away in the local copy.

you mean you can click anywhere on the button and it acts as an hyperlink? werid, since i use my offline version as it still does the same, i have to move the mouse over the the very right in order for it to work

I'm still of the strong belief that it's machine specific problems being encountered here. I've checked the site on quite a number of systems here, which include a range of OS's, hardware and browser options, and it works perfectly on all of them. Point is, I know damn well that all the systems I have here are in perfect condition as regards OS and software installation, free from any system or software corruption or conflicts.

I'm still of the strong belief that it's machine specific problems being encountered here. I've checked the site on quite a number of systems here, which include a range of OS's, hardware and browser options, and it works perfectly on all of them. Point is, I know damn well that all the systems I have here are in perfect condition as regards OS and software installation, free from any system or software corruption or conflicts.

can you kindly take a screenshot when you move the cursor over the very left of the bitmap link please? Not that I dont believe you or anything

You are referring to the link in your sig, aren't you. I'm only seeing a quite plain and basic site, with a 3 link navigation panel, the selected link highlighted, and a Yahoo ad box to the right.

Nothing fancy whatsoever, and all works as it should.

Ditto.

I see the problem in IE. So I used the user stylesheet option in IE to add a user stylesheet that puts a 1px red border around every single box on the page.

Here's a screenshot: (see attachment)

You'll notice the red lines hovering right above your navigation images. To the left, I get the regular cursor; to the right of the line, I can click the link. This happened because some positioned object is lying above the navigation menu. What happens is that you have a table with width 701 pixels aligned center and a table with width 124 pixels aligned right. If the page is too narrow, they overlap. Maybe you want to use this code instead, which puts the tables in separate table cells, avoiding overlapping.

<html>
<style type="text/css">
<!--
.style3 {
	color: #FF9900;
	font-size: 30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.style4 {color: #FF9900}
-->
</style>
<head>
<title>HOME</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>





<table width="85%" border="0" height="557" align="center">
  <tr>

    <td height="500" width="701">
      <table width="701" height="487">
        <tr> 
          <td height="2" colspan="2"> 
            <p align="right"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><img src="buttons/blank.gif" width="150" height="25"></font></b><img src="buttons/blank.gif" width="150" height="25"><img src="buttons/blank.gif" width="150" height="25"><img src="buttons/blank.gif" width="150" height="25"><img src="buttons/blank.gif" width="150" height="25"></p>
          </td>
        </tr>
        <tr> 
          <td height="465" width="87">
            <p align="center" class="style3">H</p>
            <p align="center" class="style3"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900">O</font></p>
            <p align="center" class="style3"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900">M</font></b></p>
            <p align="center" class="style3"><b><font color="#FF9900" face="Verdana, Arial, Helvetica, sans-serif">E</font></b></p>
            <p align="center"><b></b></p>
            <p align="center"><b></b></p>
            <p align="center"><b></b></p>
          </td>
          <td height="465" width="602">
<blockquote>
<blockquote>
                <blockquote> 
                  <p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><span class="style4"> ..::SITE UNDER CONSTRUCTION::..</span><br>
                  </font></b></p>
                </blockquote>
              </blockquote>
            </blockquote>
          </td>
        </tr>
      </table>
    </td>
    <td height="500" width="124"> 
      <table width="124" height="167">
        <tr> 
          <td height="503"> 
            <p align="left"><img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/navigation.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/homeclick.jpg" border="0"  width="150" height="25"><br>
              <a href="Work.htm"><img src="buttons/pfoliowork.jpg" width="150" height="25" border="0"></a><br>
              <a href="Contacts.htm"><img src="buttons/contact.jpg" width="150" height="25" border="0"></a><br>
			  
			  
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"><br>
              <img src="buttons/blank.gif" width="150" height="25"></p>
          </td>
        </tr>
      </table>
	</td>
  </tr>
</table>
<div align="left"></div>
</body>
</html>

Of course, you'll have to modify your other HTML documents similarly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.