HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.
Proud to be a PHP Open Source CMS
Learn more

> Home » Forum home » Deploying » View topic

Comcode page link with image rollover

Login / Search

 [ Join | More ]
 [More]
 Add topic 
Posted
Rating:
#89029 (In Topic #18024)
Geano
Avatar

Fan in action

No mouseover image change

HTTPS based site:
Using image as a page link: Initial image works, and the link works, but there's no 'rollover' image change.

Code

​[codebox][page="standards:teachersonly"][img="Go To" align="bottom" title="Go To" rollover="themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page][/codebox]​

Image paths valid.
"I think ...therefore I'm in a mess..."
Back to the top
 
Posted
Rating:
#89043
temp1024
Avatar

Community saint
The rollover image need to be a fully qualified URL and not a relative path.
Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#89047
Geano
Avatar

Fan in action
Thanks, Temp.
I'd tried the absolute, since I had noted that the javascript wasn't rendering the 'rollover' image source as fully qualified, but the main image was being rendered as absolute. As in the below 'rendered source' for two "page links". ​

Code



<span style="  font-size: 1.2em"><b>PSD Music Evidence Outcomes by Level</b></span>&nbsp;&nbsp;<a href="https://opusunita.us/esources/index.php?page=evoutcomes"><img style="vertical-align: bottom" src="https://opusunita.us/themes/Opus_Unita/images_custom/coda_s.png" title="Go To" alt="Go To">

    <script type="text/javascript">// <![CDATA[
        addEventListenerAbstract(window,'load',function () {
            create_rollover('rand31819','themes/Opus_Unita/images_custom/coda2_s.png');
        } );
    //]]></script></a>
<hr>
<span style="  font-size: 1.2em"><b>For Teachers only</b></span>&nbsp;&nbsp;<a href="https://opusunita.us/standards/index.php?page=teachersonly"><img style="vertical-align: bottom" src="https://opusunita.us/themes/Opus_Unita/images_custom/coda_s.png" title="Go To" alt="Go To">

    <script type="text/javascript">// <![CDATA[
        addEventListenerAbstract(window,'load',function () {
            create_rollover('rand5503','https://opusunita.us/themes/Opus_Unita/images_custom/coda2_s.png');
        } );
    //]]></script></a>
​From the comcode, using tag insert 'wizard'

Code

​[codebox][font size="1.2em"]<b>PSD Music Evidence Outcomes by Level</b>[/font]&nbsp;&nbsp;[page="esources:evoutcomes"][img="Go To" align="bottom" title="Go To" rollover="themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page]
<hr />
[font size="1.2em"]<b>For Teachers only</b>[/font]&nbsp;&nbsp;[page="standards:teachersonly"] [img="Go To" align="bottom" title="Go To" rollover="https://opusunita.us/themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page][/codebox]​

I'm wondering if this is javascript issue related to HTTPS based site /cross scripting?. I don't need the rollover effect for this, implemented it through the 'learning' curve, and noted it doesn't work, in this case of 'page links', haven't the straight-up 'image rollover' elsewhere... yet. Just inside the 'page link'.
"I think ...therefore I'm in a mess..."
Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by JeanLiked by Chris GrahamLiked by Guest)  
Rating:
#89049
temp1024
Avatar

Community saint
Its not a cross-site scripting issue, but you did find a bug.

The IMG tag is missing an id attribute. This can be fixed by editing the COMCODE_IMG.tpl template and changing:

Code

<img{+START,IF_NON_EMPTY,{ALIGN}} style="vertical-align: {ALIGN|}"{+END} src="{URL*}" title="{+START,IF_PASSED,TOOLTIP}{$STRIP_TAGS,{TOOLTIP}}{+END}{+START,IF_NON_PASSED,TOOLTIP}{$STRIP_TAGS,{CAPTION}}{+END}" alt="{$STRIP_TAGS,{CAPTION}}" />
to:

Code

<img{+START,IF_NON_EMPTY,{ALIGN}} style="vertical-align: {ALIGN|}"{+END} src="{URL*}" {+START,IF_PASSED,ROLLOVER}id="{$GET%,RAND_ID_IMG}"{+END} title="{+START,IF_PASSED,TOOLTIP}{$STRIP_TAGS,{TOOLTIP}}{+END}{+START,IF_NON_PASSED,TOOLTIP}{$STRIP_TAGS,{CAPTION}}{+END}" alt="{$STRIP_TAGS,{CAPTION}}" />
Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#89050
temp1024
Avatar

Community saint
Almost forgot. The fact that the rollover doesn't resolve relative paths should be considered a bug also. If image can resolve a relative path then so should rollover.
Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by JeanLiked by Chris Graham)  
Rating:
#89059
Geano
Avatar

Fan in action
Yep! Great, Temp!
That got it working... for 'page links' right off the comcode link wizard... in order to get it working right for external links, I finally came up with a mish-mash of code... all kinds of xml validation probs otherwise, it seemed. Was Nuts! Screwy!
For external this is what resolves it, after changing the template code you gave:

Code

"some text defining the external page &nbsp;&nbsp"
<a href="url" title="whatever" target="_blank">
​[img="Go To" align="bottom" title="Go To {!LINK_NEW_WINDOW}" rollover="Absolute URL to rollover image"]relative url to initial image[/img]​
</a>
That produces the link image sequence I wanted, except:
accompanied by a tiny 'superscript' "external link" image with the link's title tooltip.

Since I didn't need or want that little thingy hovering by my link image,
and had the link "defining text" next to the image,
easiest/safest way to get rid of it for me was to go to
my theme's global.css
down about line 3980 under 'Link Type Display' classes
and comment out​

Code

a[target="_blank"] {background: url('{$IMG;,filetypes/external_link}') no-repeat right top; padding-right:10px;}

Thanks Temp!
Mike
"I think ...therefore I'm in a mess..."
Back to the top
 
Posted
Rating:
#89069
Jean
Avatar

Community saint
Well Done, Mike!
Thanks for sharing!
:thumbs:
Jean
 
Back to the top
 
Posted
Rating:
#89070
Geano
Avatar

Fan in action
Thank you, Jean...
I thought another newbie might want to know how to get rid of that superscript new window thingy...
That rollover fix is due to Temp1024 finding the fault in the template.

The crazy zoo of code possibilities for an old fool like me that I ran into trying to come up with that simple ext page linking nearly drove me back to drinking. Looks simple, now that's it there, doesn't it? duh.  But I couldn't get past the validation checks on page preview, and have it working, with anything else.
Gotta wonder how I could get so obsessed with something glitzy that wasn't even necessary to get the simple effect of 'go to' something 'from here'.

Now, moving on to real issues.... :( learning OCP, and getting that site set up instead of playin' with it.
Cheers!
Mike
"I think ...therefore I'm in a mess..."
Back to the top
 
Important!
Posted
Item has a rating of 5 (Liked by JeanLiked by Geano)  
Rating:
#89075
Chris Graham
Avatar

ocStaff (admin)

Automated fix message

Geano said

HTTPS based site:
Using image as a page link: Initial image works, and the link works, but there's no 'rollover' image change.

Code

​[codebox][page="standards:teachersonly"][img="Go To" align="bottom" title="Go To" rollover="themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page][/codebox]​

Image paths valid.
This issue has been filed on the tracker as issue #721, with a fix.


Become a fan of ocPortal on Facebook or add me as a friend.

Expand: Was I helpful? Was I helpful?

Expand: Follow me on Twitter Follow me on Twitter







If I answered something that you think should be in the documentation, please take the initiative and add it to the community documentation. We really need people to help out here and build a well-organised large support resource.
Important!
 
Posted
Rating:
#89180
Geano
Avatar

Fan in action
Must be true, Chris never sleeps.:thumbs:
"I think ...therefore I'm in a mess..."
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:
 Add topic 
> Forum home » Deploying

Quick reply   Contract

Your name:
Your message:
( First post )