Rollover but no link?

bobness · Jan 3, 2001

Is it possible to have a rollover image with no link, so that there is no click event, just a rollover event? When I set the href="#" in IE it works ok, but NN will display an hourglass which makes you think something is happenning, when in fact nothing is ... My preference would be to do away with the href statement altogether in the <a> tag, eg.

<a onMouseOut="MM_swapImgRestore()" OnMouseOver="MM_swapImage('Image1','','/test/Develop/PARKS/camping/images/camp_westside.jpg',1)"><img name="Image1" border="0" src="/test/Develop/PARKS/camping/images/camp_stillwater.jpg" width="230" height="161"></a>

(generated using DreamWeaver) ...

This works perfectly in IE, but does nothing at all in NN ...

Any ideas?

GIGN · Jan 3, 2001

Absolutely, you can have the mouseOver like that, by just including the event handler calls in the image tag, instead of <a>.

The problem with this then, is that NN4 does not pick up events from the img tag, so it will ignore the roll over. This is why the <a> is needed, because it is one of the only things NN reads mouse events from.

Try using :
<a href="javascript:void(0)">
This may work better for you. The javascript: in there provides a way of calling a function instead of trying to find a link. "Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"

bobness · Jan 3, 2001

Bangers:

Interesting suggestion, putting the rollover in the <img> tag instead of the <a> tag ... I even confirmed that IE works without the <a> tag altogether! On the other hand, I tried the javascript:void(0) that you suggested but *still* get the same result with NN! I need something similar, it would appear, that NN ignores altogether! Thanks anyway ...

tanderso · Jan 3, 2001

Try putting onClick="return false" in your <a> tag. That should keep the link from doing anything.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

bobness · Jan 4, 2001

Tom -

Thanks for the suggestion! I suppose that this is the best we can get with NN4 ... I still prefer embedding the rollover behaviours in the <img> tag instead of the <a> tag for the cleanest effect and have confirmed that this will work in NN6, but as many people are still using NN4 or less, this is not an option ... Thanks again all for your help!

tanderso · Jan 4, 2001

Have you tried using a <span> or a <div> in place of your <a>? I believe NS4 allows mouseovers on them. Try it.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

bobness · Jan 4, 2001

Once again, these will work in IE but not NN4! (Span works better than div by the way) ... Is there another way to do this other than:

<span onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','image2.jpg',1)">
<img name="Image1" border="0" src="image1.jpg">
</span>

?

ackka · Jan 4, 2001

here is browser sniffing code from

http://www.htmlguru.com

that will allow you to do this.....

in the html file

Code:

<html>

<SCRIPT LANGUAGE=&quot;JavaScript&quot; SRC=&quot;leftscript.js&quot;></SCRIPT>
<LINK REL=stylesheet TYPE=&quot;text/css&quot; HREF=&quot;leftstyles.css&quot; TITLE=&quot;style&quot;>

</HEAD>

<BODY TEXT=&quot;#000000&quot;  BGCOLOR=&quot;#3399FF&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SCROLL=&quot;NO&quot; onLoad=&quot;
    	if(is.ns4) 
	{
        available_width=innerWidth;
        available_height=innerHeight;
        initializeLayers();
	
	}
    	else if(is.ie4) 
	{
        available_width=document.body.clientWidth;
        available_height=document.body.clientHeight;
	initializeLayers();
	
	
	}&quot;>

<!--
<A 
HREF=&quot;JavaScript://&quot; 
onClick=&quot;showLayer(5);&quot;
onMouseOver =&quot;document.TRIG5Img.src='images/trig2.gif';ShowText=true;changeTextImage(5)&quot;
onMouseOut  =&quot;document.TRIG5Img.src='images/trig1.gif';ShowText=false;changeTextImage(5)&quot;	
>
-->

<!--
These div tags control the layers that control the loading of the menu
image
-->
<DIV ID=&quot;button1&quot; STYLE=&quot;position: absolute; width: 113px; height: 47px; z-index: 2; visibility: hidden;&quot;>
<A 
HREF=&quot;JavaScript://&quot; 
onMouseOver =&quot;showMenu(1)&quot;
onMouseOut  =&quot;&quot;	
>
<IMG SRC=&quot;images/bluebutton.gif&quot; NAME=&quot;button1img&quot; BORDER=&quot;0&quot; HSPACE=&quot;0&quot; ALIGN=&quot;TOP&quot; WIDTH=&quot;127&quot; HEIGHT=&quot;47&quot;></img>
</a>
</DIV>

in the .js file

Code:

//this code is mostly from the curious eye tutorial found at [URL unfurl="true"]www.htmlguru.com[/URL]
//It was released under the gnu public license by ackka
/////////////////////////////////////////////////////
//                                                 //
//  SECTION 5: BROWSER SNIFFER &amp; DOMS                                //
//  ---------------------------------------------  //
//  Document OBJect switch routine use to          //
//  maintain cross-browser compatibility.          //
//                                                 //
/////////////////////////////////////////////////////


// BROWSER SNIFFER (Sniff out the good and bad browsers)

function Is() {
    var agent = navigator.userAgent.toLowerCase();
    this.major = parseInt(navigator.appVersion);
    this.minor = parseFloat(navigator.appVersion);
    this.ns  = ((agent.indexOf('mozilla')!=-1) &amp;&amp; ((agent.indexOf('spoofer')==-1) &amp;&amp; (agent.indexOf('compatible') == -1)));
    this.ns2 = (this.ns &amp;&amp; (this.major == 2));
    this.ns3 = (this.ns &amp;&amp; (this.major == 3));
    this.ns4b = (this.ns &amp;&amp; (this.minor < 4.04));
    this.ns4 = (this.ns &amp;&amp; (this.major >= 4));
    this.ie   = (agent.indexOf(&quot;msie&quot;) != -1);
    this.ie3  = (this.ie &amp;&amp; (this.major == 2));
    this.ie4  = (this.ie &amp;&amp; (this.major >= 4));
    this.op3 = (agent.indexOf(&quot;opera&quot;) != -1);
    this.win   = (agent.indexOf(&quot;win&quot;)!=-1);
    this.mac   = (agent.indexOf(&quot;mac&quot;)!=-1);
    this.unix  = (agent.indexOf(&quot;x11&quot;)!=-1);
}

var is = new Is();

function onerror() {
    document.location.href = &quot;javascript:&quot;;
}

// DOCUMENT OBJECT SWITCH (Used for building cross_browser functions)

if(is.ns4) {
    doc = &quot;document&quot;;
    sty = &quot;&quot;;
    htm = &quot;.document&quot;
} else if(is.ie4) {
    doc = &quot;document.all&quot;;
    sty = &quot;.style&quot;;
    htm = &quot;&quot;
}

/////////////////////////////////////////////////////
//                                                 //
//  SECTION 7: POSITIONING                         //
//  ---------------------------------------------  //
//  Build layer OBJects then position using        //
//  screen width and height dimensions, then       //
//  turn on layer visibility.                      //
//                                                 //
/////////////////////////////////////////////////////
var button1obj
var button2obj
var button3obj

var menu1obj
var menu2obj
var menu3obj

var display1obj
var display2obj
var display3obj

var links1obj;
var links2obj;
var links3obj;

var blockobj;

function initializeLayers()
{
blockobj = eval(doc + '[&quot;block&quot;]' + sty);
blockobj.left = 0 ;
blockobj.top = 0 ;
blockobj.visibility = &quot;visible&quot;;


///////////////////////////////////////////////////////////

in the .css file

Code:

BODY {
 background-attachment: fixed;
}
P {
font-size: 10pt;
font-weight: 100;
font-family: &quot;Times New Roman&quot;, &quot;arial&quot;, &quot;helvetica&quot;, sans-serif;
color: white;
}

ackka
ackka@mad.scientist.com

http://home.cyberarmy.com/ackka

http://www.cultdeadcow.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Rollover but no link?

bobness

Programmer

GIGN

Programmer

bobness

Programmer

tanderso

IS-IT--Management

bobness

Programmer

tanderso

IS-IT--Management

bobness

Programmer

ackka

Programmer

Similar threads

Part and Inventory Search

Sponsor